懸停的jQuery動畫延遲

我編寫了一些jQuery來動畫化所有.linkbox來增加高度，它的效果很好，除了我點擊的元素比其他兩個元素慢（所以它就像它懸停速度較慢），如何讓所有三個元素都以完全相同的方式製作動畫，他們是不是應該這樣做？他們還從底部開始動畫，可以告訴它從頂部開始動畫？懸停的jQuery動畫延遲

這裏的所有代碼的鏈接：http://jsbin.com/fihes/2/edit?html,css,js,output

提前感謝！

HTML：

<body> 
    <div class="linkbox"><div class="text">Om mig</div></div> 
    <div class="linkbox"><div class="text">Portfolio</div></div> 
    <div class="linkbox"><div class="text">Kontakt</div></div> 
</body>

CSS：

body{ 
background:black; 
background-attachment:fixed; 
width: 102%; 
margin: 0px; 
padding: 0px; 
} 

.linkbox{ 
opacity: 0.5; 
width:33%; 
height: 200px; 
background-color: #ffffff; 
padding: 0px; 
margin: -2px; 
display:inline-block; 
margin-top: 35%;  
} 

.linkbox:hover{ 
    opacity: 1; 
    transition: all 0.4s ease; 

} 

.text{ 
    text-align:center; 
    font-family: Helvetica; 
    font-size: 42px; 
    padding: 74px; 
}

的jQuery：

$(document).ready(function(){ 
$('.linkbox').click(function(){ 
    $('.linkbox').animate({height:"400px"}, "slow", "swing"); 
}); 
$('.text').click(function(){ 
    $('.text').fadeTo("fast", 0); 
}); 
});

來源

2014-02-15 Jojje Berglund

你點擊代碼變慢了，因爲你有"slow"，你可以把它改成"fast"相反，像所以：

$('.linkbox').click(function(){ 
    $('.linkbox').animate({height:"400px"}, "fast", "swing"); 
});

要回答你的第二個問題，我不相信只有.animate()才能讓它從上到下滑動。但是，有.slideDown()的影響。

.slideDown（）方法動畫匹配元素的高度。這將導致頁面的下部滑下，爲透露項目

http://api.jquery.com/slidedown/

來源

2014-02-15 14:41:42 CRABOLO

它確實是使所有的動畫更快的唯一的事情讓路。事情是，我點擊的div比其他兩個div動畫更慢，所以如果我點擊中間div，那個div旁邊的div已經完成了他們的動畫，當中間div在其中途動畫。 –

好吧，你可以改變其他的「慢」，或者你可以使用時間以毫秒爲單位..如5000，這將是5秒 – CRABOLO

我該怎麼做？我只有這段代碼，不應該所有的三個div都有相同的動畫速度了嗎？ –

懸停的jQuery動畫延遲

回答

相關問題