jQuery animation delay on hover

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? 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

Thanks in advance!

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

Your click code is slower because you have "slow" , you can change it to "fast" instead, like so:

$('.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. However, there is the .slideDown() effect.

The .slideDown() method animates the height of the matched elements. This causes lower parts of the page to slide down, making way for the revealed items

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

jQuery animation delay on hover

Question

1 answers

solution1
0 2014-02-15 14:41:42

jQuery animation delay on hover

Question

1 answers

solution1 0 2014-02-15 14:41:42

solution1
0 2014-02-15 14:41:42