Question

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

我正在尝试创建从黑白中淡出的彩色照片的效果。淡入效果，但它首先褪色的黑色和白色OUT，我不想要...就像它看起来好像颜色正在通过。然后，一旦它徘徊，它应该恢复到我原来的图形，它目前根本没有。

以下代码与我上面提到的部分完全相同...

//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）事件提供两个功能。您目前只使用“结束”功能。 “out”功能被忽略（因为你没有提供），这就是你没有看到淡出效果的原因。

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

这种影响有点难以实现。

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

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

现在。我不打算研究一切，但是。这样做会在动画期间暂时在“this”图像元素的右侧显示“otherImageElement”。显然不是你想要的。我相信“otherImageElement”必须与原始图像“相对”放置，以便一个显示在另一个上方。

Answer 2

再次感谢Brad的投入......我喜欢你接近它的方式......我希望它能够起作用：）

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

          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) );
                }
            });
        }

帮助悬停功能

2 个答案: