Question

Our div #logo is set to 0.8 opacity via css:

background:rgba(50,50,50,0.8)

After a delay, #logo is faded to 0.4 and #main-navigation is animated:

$("#main-navigation").delay(7000).slideUp(1000);
$("#logo").delay(7000).fadeTo(1000,0.4);

When the mouse is moved, #logo is faded to 0.99 and #main-navigation is animated again:

var c;
$(document).on('mousemove',function() {        
$("#logo").fadeTo(1000,0.99);
$("#main-navigation").slideDown(1000);
....

Then a timer is set and #logo helpshould be faded back to 0.4 and #main-navigation is animated one final time:

....
clearTimeout(c);
c= setTimeout(function(){
$("#logo").fadeTo(1000,0.4);
$("#main-navigation").slideUp(1000);
}, 2000);
});

Everything works fine EXCEPT for fading #logo back to 0.4.

Any ideas would be greatly appreciated!

Was it helpful?

Solution

Try using .stop()

$("#logo").stop().fadeTo(1000,0.4);

If that's not working, please provide a http://www.jsfiddle.net with your relevant code


.stop()

.stop( [clearQueue ] [, jumpToEnd ] ) Returns: jQuery

Description: Stop the currently-running animation on the matched elements.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top