0

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

我正在尝试创建从黑白淡入淡出的彩色照片的效果。作品中的淡入淡出，但它首先将黑色和白色淡出，这是我不想要的……我喜欢它看起来好像颜色正在通过。然后，一旦它悬停在它上面，它应该恢复到我目前根本没有做的原始图形。

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

//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");
                });
            });
        }
    });
}
4

2 回答 2

0

您可以为 hover(over, out) 事件提供两个功能。您目前只使用“over”功能。“out”功能被忽略（因为您没有提供），这就是为什么您没有看到淡出效果。

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

这种效果将更难实现。

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

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

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

于 2009-11-04T15:18:21.990 回答
0

再次感谢布拉德的意见......我喜欢你接近它的方式......我希望它会起作用:)

它再次产生了一个空白屏幕对不起......这是我的代码......

          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) );
                }
            });
        }
于 2009-11-04T20:34:32.070 回答