CODEWITHSUNDEEP
jqueryhtmlcssjquery-animate
Tyler Rash
Tyler Rash

Reputation: 1173

jQuery height animation at the top, not the bottom of an element

HTML/CSS/JS here: http://jsfiddle.net/_mtr/XGe8d/2/

My problem is that the animation is taking place at the bottom of the element, not the top. I figure it's an issue with my CSS positioning, but I can't suss it out. And ideas?

Upvotes: 4

Views: 2172

Answers (4)

moe
moe

Reputation: 29704

here is another solution

http://jsfiddle.net/moeishaa/s26wr/

Upvotes: 1

Code Maverick
Code Maverick

Reputation: 20415

I updated your jsFiddle. I added position: relative to your css and used top(). I also added .stop(true, true) to eliminate queuing issues.

Upvotes: 0

Ken Redler
Ken Redler

Reputation: 23943

If I understand what you're trying to achieve, one option is to animate padding-top instead of height.

Upvotes: 2

Fareesh Vijayarangam
Fareesh Vijayarangam

Reputation: 5052

Try

$(document).ready(function() {
    $("a").hover(

    function() {
        $(this).animate({
            'paddingTop': '+=10px'
        }), $(this).animate({
            'paddingTop': '-=10px'
        });
    });

});

Upvotes: 2

Related Questions