javascript - 当鼠标单击第一个 <div> 时，它必须向后移动，并且必须显示第二个 <div>

Question

代码:

<div id="main" height="500px" width="500px" style="margin-left:500px; margin-top:100px; position:absolute;">
<div id="div1" style="display:block;position:absolute">
    <p style="background-color:#ff9c00; border-radius: 8px; height: 70px; width: 299px;"></p>
</div>
<div id="div2" style="display:block;position:absolute;margin-left:25px;">
    <p style="background-color:#afca37; border-radius: 8px; height: 70px; width: 299px;"></p>
</div>
<div id="div3" style="display:block; position:absolute; margin-left:50px;">
    <p style="background-color:#e11d4e; border-radius: 8px; height: 70px; width: 299px;"></p>
</div>
<div id="div4" style="display:block; position:absolute; margin-left:75px;">
    <p style="background-color:#a751df; border-radius: 8px;height: 70px; width: 299px;"></p>
</div>
<div id="div5" style="display:block; position:absolute; margin-left:100px;">
    <p style="background-color:#f6d12c; border-radius: 8px; height: 70px; width: 299px;"></p>
</div>

脚本:

$(document).ready(function(){
    $(div1).mouseover(function(){
        $("#div1").animate({right:'2px'});
    });
    $(div2).mouseover(function(){
        $("#div2").animate({right:'2px'});
    });
    $(div3).mouseover(function(){
        $("#div3").animate({right:'2px'});
    });

它不工作；它只移动左侧。

Answer 1

我想我以某种方式理解你想要做什么。我在 jsfiddle 上测试了你的代码，它可以工作，但没有按预期动画，因为 right位置未设置，因此默认为 'auto'并且 jQuery 在该位置出现动画问题。

我还建议您为 left 制作动画属性代替:

$('#main > div').mouseover(function () {
    $(this).animate({       
        /* Im getting index value of the hovered div 
        multiply by 25 (the margin-left differential) 
        so all div will position on the same spot when animated.
        350 is just random you define whatever you like
        */
        left: -350-($(this).index()*25)
    }).siblings().animate({
        left: 0
    });
});

您可以在此处查看演示:jsfiddle.net/bDJYF/

但是，正如您在演示中看到的 <div>一遍又一遍地动画。这是因为我们正在 mouseover() 上执行它事件，它似乎不适合您的设计。如果可以切换到click()然后你可以看到一个好的结果:jsfiddle.net/bDJYF/1/