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

我试图在鼠标进入时将一个图像淡入秒，在鼠标离开时将其反转。 我想要的效果可以在他们的任何产品图片上找到。下面是脚本

<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>   

$（'one1，'one2'）.mouseenter（函数（）{
美元（本）。淡出（500）；
美元.prev（'img'）.fadeIn（500）；
});
$（'#two1，#two2'）.mouseleave（function（）{
美元（本）。淡出（500）；
美元.prev（'img'）.fadeIn（500）；
});

它会淡出一次，但下一次两个图像都会消失。任何人都可以发布代码或引用任何与此相同的代码/插件。

如果您有

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

你应该

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

你刚刚忘了在鼠标上将“下一步”切换为“上一步”。

你在哪里

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

你应该

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

您刚刚忘记在鼠标上将“下一步”切换为“上一步”。

试试这个

$('#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);
});

例如，试试这个

$('#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);
});

例如，在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);
            });
        });     

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

---

确保没有两个/更多DOM元素具有相同的

id

确保没有两个/更多DOM元素具有相同的

id