Javascript - Delay animate upon mouseleave - javascript

I'm using a simply Javascript that makes a menu slide out upon mouseenter then slide in upon mouseleave. However, when the mouseleaves the area, I would like the menu to remain in place for a few seconds and then slide in.
This is the code im using.
$('#nav').mouseleave(function()
{
$("#nav").animate({"left": "0"}, "1000");
$("#nav li a").css({ opacity: 0.7 });
$("#nav li.current a").css({ opacity: 1 });
});
I've search stack overflow and google, but haven't been able to get any of the solutions to work. I'm only new to JS
Any ideas?

Slightly better, if you hover again, before the animation is executed:
$('#nav').hover(function () {
clearTimeout(this.timer);
}, function () {
this.timer = setTimeout(function () {
$("#nav").animate({"left": "100"}, "1000");
$("#nav li a").css({ opacity: 0.7 });
$("#nav li.current a").css({ opacity: 1 });
}, 1000);
});

I'm a pretty big fan of the setTimeout() method.
http://www.w3schools.com/jsref/met_win_settimeout.asp
So I would do
$('#nav').mouseleave(function()
{
setTimeout( function(){
$("#nav").animate({"left": "0"}, "1000");
$("#nav li a").css({ opacity: 0.7 });
$("#nav li.current a").css({ opacity: 1 });},1000)
});

Use the .delay() function from the JQuery API: http://api.jquery.com/delay/
$("#nav").delay(3000).animate({"left": "0"}, "1000");
This waits 3000 milliseconds(3 seconds) before calling animate()

Related

How do I add setTimeout to delay the fading animation in the following code?

I'm using the following to fade in and fade out elements on hover:
$(".hidden").hover(function() {
$(this).animate({
opacity: 1
});
}, function() {
$(this).animate({
opacity: 0
});
});
I would like to add a delay between opacity 1 and opacity 0 (wait a moment and then fade out the element).
How can I accomplish that?
$(".hidden").hover(function() {
$(this).animate({
opacity: 1
});
}, function() {
var _this = $(this);
setTimeout(function (){
_this.animate({
opacity:0
});
},1000)
});
Yuu can use the .delay() function http://api.jquery.com/delay/.
$(".hidden").hover(function() {
$(this).delay(1000).animate({
opacity: 1
});
}, function() {
$(this).delay(1000).animate({
opacity: 0
});
});
http://jsfiddle.net/gk14nqrx/
This will delay 1 second before fading out. You need to store a reference to $(this) because inside of setTimeout the this is no longer the DOM element.
$(".hidden").hover(function() {
$(this).animate({
opacity: 1
});
}, function() {
var that = $(this);
setTimeout(function() {
$(this).animate({
opacity: 0
});
}, 1000);
});

Animating list item with more efficiency

I want to bump up a li on hover and let it get to original state when the mouse leaves. This works but does the hover animat(up) another time when the mouse is leaving which gives me a delay and inefficient code. Do you guys have some suggestions for me to make this more efficient?
function HoverListItem() {
var menuItem = $('#menu > li')
menuItem.on('hover', function(){
console.log('up');
$(this).animate({
'marginTop': '-10px'
}, 150);
});
menuItem.on('mouseleave', function(){
console.log('down');
$(this).animate({
'marginTop': '0px'
}, 150);
})
};
This is because the animations are queued, clear the queue before issuing a new animation. I myself also prefer using hover() to register mouseenter and mouseleave.
$("#menu > li")
.css("position", "relative")
.hover(
function() {
$(this).clearQueue().animate({
bottom: 10
});
},
function() {
$(this).clearQueue().animate({
bottom: 0
});
}
Example: http://jsfiddle.net/6xXGw/

How would I add a 1 second delay to the hide JavaScript function

This is some JavaScript I have for a simple navigation bar but I have issues with the drop down disappearing before you can click on them so I want to add a delay after the mouse leaves the bar before they hide.
How would I do that?
<script type="text/javascript">
$(document).ready(function () {
// Navigation bar drop-down
$("nav ul li").hover(function () {
$(this).addClass("active");
$(this).find("ul").show().animate({ opacity: 1 }, 400);
}, function () {
// Delay on hiding should go here
$(this).find("ul").hide().animate({ opacity: 0 }, 200);
$(this).removeClass("active");
});
$('nav ul li ul li:first-child').prepend('<li class="arrow"></li>');
$('nav ul li:first-child').addClass('first');
$('nav ul li:last-child').addClass('last');
$('nav ul li ul').parent().append('<span class="dropdown"></span>').addClass('drop');
});
</script>
Thanks in advance to anyone who can help
P.S. This is probably really obvious but I know very little about JavaScript. :L
I have a simple navigation bar
Don't use JavaScript then. This can and should be done with CSS. CSS transitions and selectors allow to define exactly what you want.
See also Delay :Hover in CSS3? and the excellent example from there.
Don't use a huge function such as delay(). Just use setTimeout().
var that = this
setTimeout(function() {
$(that).hide() // Do your stuff, just don't forget that "this" has changed
}, 1000) // Define your delay in milliseconds here
The function inside the setTimeout will execute after the delay specified as a second argument.
You can do it like this. You use the delay() method to set up the delay and you use .stop(true) on both hover functions in case the user goes out and comes back in during the delay. The .stop(true) will clear any queued animations. I also switched the code to fadeIn() and fadeOut() because those automatically do the show() and hide() as needed.
<script type="text/javascript">
$(document).ready(function () {
// Navigation bar drop-down
$("nav ul li").hover(function () {
$(this).addClass("active");
$(this).find("ul").stop(true).fadeIn(400);
}, function () {
// Delay on hiding should go here
var self = $(this);
self.find("ul").stop(true).delay(1500).fadeOut(400, function() {
self.removeClass("active");
});
});
$('nav ul li ul li:first-child').prepend('<li class="arrow"></li>');
$('nav ul li:first-child').addClass('first');
$('nav ul li:last-child').addClass('last');
$('nav ul li ul').parent().append('<span class="dropdown"></span>').addClass('drop');
});
</script>
I think you can do something like this:
<script type="text/javascript">
$(document).ready(function () {
// Navigation bar drop-down
$("nav ul li").hover(function () {
$(this).addClass("active");
$(this).find("ul").show().animate({ opacity: 1 }, 400);
}, function () {
// Delay on hiding should go here
$(this).find("ul").hide().delay(1000).animate({ opacity: 0 }, 200, function() {
$(this).removeClass("active");
});
});
$('nav ul li ul li:first-child').prepend('<li class="arrow"></li>');
$('nav ul li:first-child').addClass('first');
$('nav ul li:last-child').addClass('last');
$('nav ul li ul').parent().append('<span class="dropdown"></span>').addClass('drop');
});
</script>
You could use delay().
<script type="text/javascript">
$(document).ready(function () {
// Navigation bar drop-down
$("nav ul li").hover(function () {
$(this).addClass("active");
$(this).find("ul").show().animate({ opacity: 1 }, 400);
}, function () {
// Delay on hiding should go here
$(this).find("ul").delay(5000).fadeOut();
$(this).removeClass("active");
});
$('nav ul li ul li:first-child').prepend('<li class="arrow"></li>');
$('nav ul li:first-child').addClass('first');
$('nav ul li:last-child').addClass('last');
$('nav ul li ul').parent().append('<span class="dropdown"></span>').addClass('drop');
});
</script>
Very interesting. Nothing hides, until you mouseout.
FIDDLE

setTimeout not completely working

In the following code, the div animating in my moveit() function is waiting for the setTimeout() in the .click functions, but the p.font-size animation in moveit() is happening immediately upon the click. It's not waiting for the timeout. I'm sure it's a basic issue, but that's the level I'm at right now.
Thanks for any suggestions,
<script type="text/javascript">
$(document).ready(function(){
$("#no").click(function() {
$("#sleep").animate({"border-width": "10px"}, "fast");
$("#sleepanswer").animate({ opacity: 0 }, "fast");
$("p:.sleepquestion").replaceWith("That is too bad. Tonight you will sleep better.");
setTimeout(moveit, 2000);
});
$("#yes").click(function() {
$("#sleepanswer").animate({ opacity: 0 }, "fast");
$("p:.sleepquestion").replaceWith("That is great! A good night sleep is important.");
setTimeout(moveit, 2000);
});
});
</script>
<script type="text/javascript">
function moveit() {
$("#sleep").animate({"left": "10px", "width": "150px"}, "slow");
$("p.sleepquestion").animate({"font-size": "16px"}, "slow");
$("#sleepanswer").animate({ "left": "-9999px"}, "fast");
}
</script>
I think the problem may have been your use of .replaceWith(). That attempts to replace an element with another, but you've tried to replace an element with text. I think you just want to use .html() instead.
Also, you don't need to use the setTimeout() - you can use .delay() instead. And, I think your selectors p:.sleepquestion are probably not right. You can go with this:
<script type="text/javascript">
$(document).ready(function(){
$("#no").click(function() {
$("#sleep").animate({"border-width": "10px"}, "fast");
$("#sleepanswer").animate({ opacity: 0 }, "fast");
$("p.sleepquestion").html("That is too bad. Tonight you will sleep better.");
moveit();
});
$("#yes").click(function() {
$("#sleepanswer").animate({ opacity: 0 }, "fast");
$("p.sleepquestion").html("That is great! A good night sleep is important.");
moveit();
});
});
</script>
<script type="text/javascript">
function moveit() {
$("#sleep").delay(2000).animate({"left": "10px", "width": "150px"}, "slow");
$("p.sleepquestion").delay(2000).animate({"font-size": "16px"}, "slow");
$("#sleepanswer").delay(2000).animate({ "left": "-9999px"}, "fast");
}
</script>
I also changed .replaceWith() to .html() and changed p:.sleepquestion to p.sleepquestion.
Your function moveit could also be written like this by putting the timeout inside the function:
function moveit() {
setTimeout(function() {
$("#sleep").animate({"left": "10px", "width": "150px"}, "slow");
$("p.sleepquestion").animate({"font-size": "16px"}, "slow");
$("#sleepanswer").animate({ "left": "-9999px"}, "fast");
}, 2000);
}
I had the same issue with a function call in setTimeout() not working . I solved the issue by surrounding the function call in quotes.
For example:
$("#yes").click(function() {
$("#sleepanswer").animate({ opacity: 0 }, "fast");
$("p:.sleepquestion").replaceWith("That is great! A good night sleep is important.");
setTimeout("moveit()", 2000);
});

I'm using the jQuery .scroll() function, why can't I override its effects with another function?

I'm using the jQuery .scroll() function to make a certain element fade to 0.2 opacity. Since there is no native "scrollstop" indicator, I decided to make the element fade back to 1.0 opacity on hover. However, it doesn't work.
Here's my code:
$(document).ready(function() {
$(window).scroll(function() {
$("#navlist").animate({ opacity: 0.2 }, 2000);
});
$("#navlist").hover(
function() {
$(this).animate({ opacity: 1 }, 500);
}, function() {
$(this).animate({ opacity: 1 }, 500); // just to be safe?
}
);
});
When I scroll, the #navlist element fades, but when you hover over it nothing happens. But if you refresh the page when you're half way down, the element automatically fades as soon as you refresh, before I've scrolled, and if you try to hover to fade it back in, nothing happens.
Any thoughts?
try to stop animation first
$(document).ready(function() {
$(window).scroll(function() {
$("#navlist").stop().animate({ opacity: 0.2 }, 2000);
});
$("#navlist").hover(function() {
$("#navlist").stop().animate({ opacity: 1.0 }, 500);
},
function() {
$("#navlist").stop().animate({ opacity: 1.0 }, 500);
}
);
The problem is that the scroll event, gets called multiple times during a single scroll (10-20 per a single mouse wheel scroll), so #navlist gets a lot of animate events of 2 seconds.
I am not exactly sure what's going on with jQuery, but when you hover it, even though the opacity: 1 animations run, they end up running the queued #navlist animations.
I solved the problem using a sort of flag, I bet you can find something more efficient.
$(document).ready(function(){
var isAnimationBusy = false;
$(window).scroll(function(){
if(isAnimationBusy) return;
isAnimationBusy = true;
$("#navlist").animate(
{ opacity: 0.2 }, 2000,
function(){ isAnimationBusy = false; }
);
});
$("#navlist").hover(
function(){
isAnimationBusy = false;
$(this).stop().animate({ opacity: 1 }, 500);
},
function(){
isAnimationBusy = false;
$(this).stop().animate({ opacity: 1 }, 500);
}
);
});
Edit: The animation stop will solve the problem, I still believe you should control how many times you call the animate event. There could be a performance hit.

Categories

Resources