帮助悬停功能

Question

任何帮助将不胜感激...

我正在尝试创建彩色照片从黑白淡出的效果。淡入淡出是有效的，但它首先淡出黑白的，这是我不希望的……我喜欢它看起来好像颜色正在显现。然后，一旦它悬停在它上面，就应该恢复到我原来的图形，而它目前根本没有这样做。

除了我上面提到的部分之外，下面的代码可以完美地工作......

//Loop through the images and print them to the page
for (var i=0; i < totalBoxes; i++){
    $.ajax({
        url: "random.php?no=",
        cache: false,
        success: function(html) {
            // following line I originally suggested, but let's make it better...
            //$('#bg').append(html).fadeIn('slow');
            // also note the fine difference between append and appendTo.
            var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
            $('img', $d).hover(function() {
                var largePath = $(this).attr("rel");
                $(this).fadeOut("slow", function() {
                    $(this).attr({ src: largePath }).fadeIn("slow");
                });
            });
        }
    });
}

Answer 1

您可以为悬停（over，out）事件提供两个函数。您当前仅使用“over”功能。 “out”功能被忽略（因为您没有提供），这就是为什么您看不到淡出效果的原因。

您寻找的效果不起作用，因为淡出效果在调用回调函数之前等待动画完成。您希望两种效果同时执行。

这种效果要实现起来会有点困难。

首先，您必须有 2 个图像元素。一种包含颜色，一种包含黑白图像。

$(this).fadeOut("slow");
$("otherImageElement").fadeIn("slow");

现在。我不会研究一切，但是。执行此操作将在动画期间暂时将“otherImageElement”显示在“this”图像元素的右侧。显然不是你想要的。我相信“otherImageElement”必须“相对”于原始图像放置，以便一个出现在另一个之上。

Answer 2

再次感谢布拉德的输入...我喜欢你处理它的方式...我希望它能够工作:)

它再次产生了一个空白屏幕抱歉...这是我的代码...

          function switch(element) { 
            var originalPath = $(element).attr("src"); 
            var switchToPath = $(element).attr("rel"); 
            $(element).attr({ src: originalPath }); 
            $(element).fadeOut("slow", function() { 
                    $(element).attr({ src: switchToPath }).fadeIn("slow"); 
            } 
        }

      //Loop through the images and print them to the page
        for (var i=0; i < totalBoxes; i++){
            $.ajax({
                url: "random.php?no=",
                cache: false,
                success: function(html) {
                    // following line I originally suggested, but let's make it better...
                    //$('#bg').append(html).fadeIn('slow');
                    // also note the fine difference between append and appendTo.
                    var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
                    $('img', $d).hover( switch(this), switch(this) );
                }
            });
        }