悬停功能帮助答案

【问题标题】：help with hover function悬停功能帮助
【发布时间】：2009-11-04 14:50:10
【问题描述】：

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

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

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

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

【问题讨论】：

谢谢 greg，我注意到这已被编辑，但我看不到更改？我把代码粘贴进去了，它没有改变！

标签： jquery hover fadein fadeout

【解决方案1】：

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

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

这个效果会有点难实现。

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

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

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

【讨论】：

我刚刚在谷歌上搜索了“jquery cross fade transition”。这带来了大量的点击，我相信你能找到帮助你的东西。
我尝试在悬停时加入淡出功能，但不断得到一个空白页面，这显然是由语法错误引起的。如何将您上面所说的内容合并到我的原始代码中？
很可能是语法错误。下载“Firebug”插件或使用 Safari 的内置工具来帮助解决语法错误。我快速编写了一个函数来帮助您使用代码切换图像。顺便说一句，未经测试。 /*在你的循环中，使用这个*/ $('img', $d).hover( switch(this), switch(this) ); /*函数在循环外定义*/ 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"); } }
嗨布拉德，我添加了您建议的代码，但它没有工作，我发布了我的示例以及我如何在上面添加它。我是不是哪里出错了？

【解决方案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) );
                }
            });
        }

【讨论】：