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

你只是忘了在鼠标手上切换“prev”的“next”。

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

DEMO

为什么第二次淡入不起作用？

4 个答案: