動畫li與JavaScript - 爲什麼他們都一次移動？

我是一個超級的n00b使用JavaScript，希望有人能幫幫我！動畫li與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;}

來源

2014-04-09 user3514964

將你的css'#navigation ul li'改成'#navigation ul li {margin-bottom：1％;}'並且你可能會明白...... – Stphane

或'float：left; '？ – putvande

這可能有幫助.. [CSS-Tricks]（http://css-tricks.com/fighting-the-space-between-inline-block-elements/） – Stphane

在我對您的問題的理解中，基於您提供的小提琴，看起來您正在試圖爲列表中的div的Y座標設置動畫。爲了做到這一點，你會想要使用CSS頂級屬性，並相應地動畫。

$("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 animate中爲頂級屬性設置動畫，您必須指定元素的位置。請注意，我已經補充說。

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

我也採取了li元素的邊緣屬性爲了讓他們顯示在一行。

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

此外，jQuery的允許鏈接等等，而不是兩次寫的選擇和與對象的兩個實例，則可以鏈子jQuery對象的一個實例的事件。

來源

2014-04-09 12:23:33

動畫li與JavaScript - 爲什麼他們都一次移動？

回答

相關問題