CODEWITHSUNDEEP
jquerydrop-down-menujquery-animate
Robbie Guilfoyle
Robbie Guilfoyle

Reputation: 3421

How to make this JQuery .animation() actually animate.

I cannot get this drop down menu to animate slowly or even anything. 

$(document).ready(function () {
    $('#menu > li').hover(function () { $('ul:first', this).show(); },
                           function () { $('ul:first', this).hide(); }
    );

    $('#menu li li').hover(function () {
        $('ul:first', this).each(function () {
            var p = $(this).parent();
            $(this).animate('top', p.position().top)
                   .animate('left', p.position().left + p.width())
                   .show();
        });},
        function () { $('ul:first', this).hide(); }
    );
});

Upvotes: 0

Views: 303

Answers (1)

polarblau
polarblau

Reputation: 17734

jQuery's animate() expects an object/"map" of CSS properties. The second parameter defines the duration of the animation in ms.

Your example would look something like this (— animating the top and the left properties in 2000ms):

$(this)
    .show()
    .stop() // see below
    .animate({
        'top': p.position().top,
        'left': p.position().left + p.width()
    }, 2000);

If you're calling animate from within an hover handler you might want to have a look at stop() as well.

Tip: The docs are an easy way to figure things like this out.

Upvotes: 2

Related Questions