懸停時的jQuery動畫延遲

Question

我正在編寫一些jQuery動畫以使所有.linkbox動畫以增加高度，並且它工作得很好，除了我單擊的元素比其他兩個元素要慢（所以就像在懸停時它慢了一樣），我該如何做？使所有這三個元素完全以相同的方式設置動畫，不是應該已經這樣做了嗎？ 而且他們是從底部進行動畫制作的，是否可以告訴它從頂部進行動畫制作？

這是所有代碼的鏈接： 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);
});
});

Answer 1

點擊代碼的速度較慢，因為您的"slow" ，您可以將其更改為"fast" ，如下所示：

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

要回答您的第二個問題，我認為僅.animate()不可能.animate()滑動。 但是，存在.slideDown()效果。

.slideDown（）方法可對匹配元素的高度進行動畫處理。 這會導致頁面下部向下滑動，為顯示的項目騰出空間

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

懸停時的jQuery動畫延遲

問題描述

1 個解決方案

解決方案1
0 2014-02-15 14:41:42

懸停時的jQuery動畫延遲

問題描述

1 個解決方案

解決方案1 0 2014-02-15 14:41:42

解決方案1
0 2014-02-15 14:41:42