悬停时的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/