Question

我是一个超级n00b的javascript，希望有人可以帮助我！

我不明白为什么所有的li项目同时都是动画的，显然我只想要一个我已经过去的动画来制作动画。

的Javascript

$("li").mouseenter(
 function()
 {
     $(this).find("div").stop(true, false).animate({"margin-bottom" : "20px"}, 'slow')
  });

$("li").mouseleave(
 function()
 {
     $(this).find("div").stop(true, false).animate({"margin-bottom": "0"}, 'fast');
 });

HTML

<div id="navigation">
<ul>
    <li><a href="#"><div></div></a>
    </li>
    <li><a href="#"><div></div></a>
    </li>
    <li><a href="#"><div></div></a>
    </li>
    <li><a href="#"><div></div></a>
    </li>
</ul>
</div>

CSS

#navigation {
width:100%;}

#navigation ul {
list-style-type:none;}

#navigation ul li {
display:inline-block;
margin-right:1%;}

#navigation ul li div {
height:125px;
width:120px;
background-color:#ccc;}

Answer 1

在我对您的问题的理解中，基于您提供的小提琴，您似乎正在尝试为列表中的div的Y坐标设置动画。为此，您需要使用CSS top属性并相应地设置动画。

$("ul li").mouseenter(function () {
    $(this).find('div').stop(true, false).animate({
        'top': '+=' + 20
    }, 'slow');
}).mouseleave(function () {
    $(this).find('div').stop(true, false).animate({
        'top': 0
    }, 'fast');
});

为了在jQuery动画中为top属性设置动画，您必须指定元素的位置。请注意，我已经添加了。

#navigation ul li div {
    height:125px;
    width:120px;
    background-color:#ccc;
    position: relative;
}

我还从li元素中取出了margin属性，以便让它们显示在一行中。

#navigation ul li {
    display:inline-block;
}

此外，jQuery允许链接，因此不是将选择器写出两次并使用对象的两个实例，而是可以在jQuery对象的一个实例上链接事件。

用javascript动画li - 他们为什么一下子都动了？

1 个答案: