jquery - 为什么第二个淡入淡出不起作用？

Question

我试图在鼠标进入时将一个图像淡化到第二个，并在鼠标离开时反转。我想要的效果可以在http://mango.com找到他们的任何产品图片。这是下面的脚本。

<div id="fade">
    <img src="two.gif" width="100" height="100" id="two1" class="after" style="display:none;"/>
    <img src="one.gif" width="100" height="100" id="one1" class="before" />
</div>
<div id="fade">
    <img src="two.gif" width="100" height="100" id="two2" class="after" style="display:none;" />
    <img src="one.gif" width="100" height="100" id="one2" class="before" style="" />
</div>
<script type="text/javascript">
$('#one1,#one2').mouseenter(function(){
    $(this).fadeOut(500);
    $(this).prev('img').fadeIn(500);
});
$('#two1,#two2').mouseleave(function(){
    $(this).fadeOut(500);
    $(this).prev('img').fadeIn(500);
});
</script>   

它会消失一次，但下一次两个图像都会消失。请任何人都可以发布代码或参考任何工作相同的代码/插件。

Answer 1

你在哪里

$('#two1,#two2').mouseleave(function(){
$(this).fadeOut(500);
$(this).prev('img').fadeIn(500);
});

你应该有

$('#two1,#two2').mouseleave(function(){
$(this).fadeOut(500);
$(this).next('img').fadeIn(500);
});

您刚刚忘记在 mouseleave 上将“下一个”切换为“上一个”。

Answer 2

试试这个。

$('#one1,#one2').mouseenter(function(){
    $(this).fadeOut(500);
    $(this).parent().find('.after').fadeIn(500);
});

$('#two1,#two2').mouseleave(function(){
    $(this).fadeOut(500);
    $(this).parent().find('.before').fadeIn(500);
});

http://jsfiddle.net/g5XF2/上的示例

Answer 3

在 mouseleave 事件功能中使用 next() 而不是 prev()

        $(document).ready(function()
        {
            $('#one1,#one2').mouseenter(function()
            {
                $(this).fadeOut(500);
                $(this).prev('img').fadeIn(500);
            });

            $('#two1,#two2').mouseleave(function()
            {
                $(this).fadeOut(500);
                $(this).next('img').fadeIn(500);
            });
        });     

Answer 4

$('#one1,#one2').mouseenter(function() {
    $(this).fadeOut(500, function() {
       $(this).prev('img').fadeIn(500);
    });

});
$('#two1,#two2').mouseleave(function() {
    $(this).fadeOut(500, function() {
      $(this).next('img').fadeIn(500);
    });
});​

演示