CODEWITHSUNDEEP
jqueryjquery-animate
Nate Martin
Nate Martin

Reputation: 1

jQuery animations still act as a queue, even when queue: false

I'm currently making a small fade-in fade-out subnavigation menu. Everything is working fine except for the fact that when I mouseover, the sub-nav menu fades in first, then animates down. I need this to happen simultaneously, so I went ahead and disabled the queue but for some reason it still fades and then animates in a sequence :C. The funny thing is: when I mouse-out, it moves and fades simultaneously! Very confusing.

$(document).ready(function(){
    $("ul.subNavMenu").fadeTo(0,0);
    $("ul.navMenu").hover(
        function() {
            $("ul.subNavMenu").animate({opacity: 1, marginTop: "20px"}, {duration: 1000, queue:false});
        },
        function() {
            $("ul.subNavMenu").animate({opacity: 0, marginTop: "0px"}, {duration: 1000, queue:false});
        }
    );
});

Here's the fiddle: http://jsfiddle.net/Hmvd3/2/

Any suggestions?

Upvotes: 0

Views: 102

Answers (2)

nickaknudson
nickaknudson

Reputation: 4807

The default easing is swing. Setting easing: 'linear' should solve your problem.

http://jsfiddle.net/nickaknudson/Hmvd3/

RESOURCES

Upvotes: 0

Shih-En Chou
Shih-En Chou

Reputation: 4165

You can try stop().

$("ul.navMenu").hover(
        function() {
            $("ul.subNavMenu").stop().animate({opacity: 1, marginTop: "20px"}, {duration: 1000, queue:false});
        },
        function() {
            $("ul.subNavMenu").stop().animate({opacity: 0, marginTop: "0px"}, {duration: 1000, queue:false});
        }
);

Upvotes: 1

Related Questions