悬停时的jQuery动画延迟

Question

I'm coding some jQuery to animate all the .linkbox to increase in height and it works great except that the element that I'm clicking on is slower than the other two elements (so it's like it's slower on hover), how do I make all the three elements animate the exact same way, shouldn't they already do that? 我正在编写一些jQuery动画以使所有.linkbox动画以增加高度，并且它工作得很好，除了我单击的元素比其他两个元素要慢（所以就像在悬停时它慢了一样），我该如何做？使所有这三个元素完全以相同的方式设置动画，不是应该已经这样做了吗？ Also they are animating from the bottom is it possible to tell it to animate it from the top? 而且他们是从底部进行动画制作的，是否可以告诉它从顶部进行动画制作？

Here's a link with all the code: http://jsbin.com/fihes/2/edit?html,css,js,output 这是所有代码的链接： http : //jsbin.com/fihes/2/edit?html,css,js,output

Thanks in advance! 提前致谢！

html: 的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: 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: jQuery的：

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

Answer 1

Your click code is slower because you have "slow" , you can change it to "fast" instead, like so: 点击代码的速度较慢，因为您的"slow" ，您可以将其更改为"fast" ，如下所示：

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

To answer your second question, I don't believe it's possible with just .animate() to have it slide from the top down. 要回答您的第二个问题，我认为仅.animate()不可能.animate()滑动。 However, there is the .slideDown() effect. 但是，存在.slideDown()效果。

The .slideDown() method animates the height of the matched elements. .slideDown（）方法可对匹配元素的高度进行动画处理。 This causes lower parts of the page to slide down, making way for the revealed items 这会导致页面下部向下滑动，为显示的项目腾出空间

http://api.jquery.com/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