为什么第二个淡入不起作用

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

您只是忘记在鼠标离开时将"下一步"切换为"上一个"。

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 event函数中使用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);
    });
});​

演示