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()让它从上到下滑动是不可能的。但是，有.slideDown()效果。

.slideDown（）方法可以设置匹配元素的高度。这会导致页面的下半部分向下滑动，为此让位透露物品

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

悬停时jQuery动画延迟

1 个答案: