Question

CODE：

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

Answer 2

您尚未关闭document.ready function

$(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 3

试用此代码：

<script>
$(document).ready(function(){
    $(div1).mouseover(function(){
        $("#div1").animate({right:'10px'});
    });
    $(div2).mouseover(function(){
        $("#div2").animate({right:'8px'});
    });
    $(div3).mouseover(function(){
        $("#div3").animate({right:'6px'});
    });
     $(div4).mouseover(function(){
        $("#div4").animate({right:'4px'});
    });
     $(div5).mouseover(function(){
        $("#div5").animate({right:'2px'});
    });

    });</script>

Answer 4

使用z-index。在鼠标单击时切换两个分区之间的z-index。您可以在鼠标点击div标签上使用以下代码。

document.getElementById('div1Id').style.zIndex=1;
document.getElementById('div2Id').style.zIndex=2;

当在第一个<div>上单击鼠标时，它必须向后移动，第二个<div>必须显示</div> </div>

4 个答案: