$('.file a').live('mouseenter', function() {
$('#download').stop(true, true).fadeIn('fast');
}).live('mouseleave', function() {
$('#download').stop(true, true).fadeOut('fast');
});
I want the mouseenter function to have a stop() and a delay of 1 second.
So, if I hover over #download the fadeIn should start after a 1 second delay. If I mouse out meanwhile the fadeIn shouldn't start. Get me?
I don't really know how to do that, any ideas?
You need to use setTimeout() in this case because of how .delay() works (and your inability to cancel it).
$('.file a').live('mouseenter', function() {
$.data(this, 'timer', setTimeout(function() {
$('#download').stop(true, true).fadeIn('fast');
}, 1000));
}).live('mouseleave', function() {
clearTimeout($.data(this, 'timer'));
$('#download').stop(true, true).fadeOut('fast');
});
You can give it a try here.
If you use .delay() it'll dequeue the next animation for the element, regardless of if you cleared that queue earlier. So you need a timeout that you can cancel, which the above does by manually calling setTimeout() and storing the result with $.data() so you can clear it later, via clearTimeout().
I was looking for the answer to a similar question, and I found that .animate() could also be used to handle this, and it obeys .stop()
It would look something like this:
$('.file a').live('mouseenter', function() {
$('#download')
.stop(true, true)
.animate({opacity:0}, 1000); // one second delay
.animate({opacity:1}, 'fast', 'swing');
}).live('mouseleave', function() {
$('#download')
.stop(true, true)
.animate({opacity:0}, 'slow', 'swing');
});
Use a setTimeout function
$('.file a').live('mouseenter', function() {
setTimeout(function(){
$('#download').stop(true, true).fadeIn('fast');
}, 1000);
}).live('mouseleave', function() {
$('#download').stop(true, true).fadeOut('fast');
});
setTimeout will execute the code inside the function after the specified miliseconds (in this case 1000).
you can use this on jquery without using delay event .
$('.file a').hover(function() {
time = setTimeout(function() {
$('#download').fadeIn();
},1000);
},function(){
clearTimeout(time);
});
1000 is your time that after it $('#download') will fade in .
Related
What I am trying to do is only run my code when someone has hovered on an element for 1 second.
Here is the code that I am using:
var timer;
$(".homeLinkWrap").mouseenter(function() {
timer = setTimeout(function(){
$(this).find('.homeLinkNfo').removeClass('flipOutY').addClass('flipInY').css({opacity: '1'});
console.log('in');
}, 1000);
}).mouseleave(function() {
$(this).find('.homeLinkNfo').removeClass('flipInY').addClass('flipOutY');
console.log('out');
clearTimeout(timer);
});
The first part (mouseenter) IS NOT functioning and DOESN'T remove the class and then add the new one. The second one (mouseleave) IS functioning properly and DOES remove the class and add the new one.
I am guessing it is because I am targeting $(this) which is the current element being hovered over and since it is in a timer function jQuery doesn't know which element $(this) is referring to.
What can I do to remedy this?
I think it is because you are calling $(this) inside the setTimeout function. You need to do something like this:
$(".homeLinkWrap").mouseenter(function() {
var $self = $(this);
timer = setTimeout(function(){
$self.find('.homeLinkNfo').removeClass('flipOutY').addClass('flipInY').css({opacity: '1'});
console.log('in');
}, 1000);
});
Inside the setTimeout callback, this no longer refers to the jQuery selection. You should either keep a reference to the selection:
$(".homeLinkWrap").mouseenter(function() {
var $this = $(this);
timer = setTimeout(function(){
$this.find('.homeLinkNfo').removeClass('flipOutY').addClass('flipInY').css({opacity: '1'});
console.log('in');
}, 1000);
})
Or use an arrow function (ES2015)
$(".homeLinkWrap").mouseenter(function() {
timer = setTimeout(() => {
$(this).find('.homeLinkNfo').removeClass('flipOutY').addClass('flipInY').css({opacity: '1'});
console.log('in');
}, 1000);
})
The problem here is that the this inside the callback function that you're passing to setTimeout doesn't reference to the same point that the this outside the callback does.
There are some ways of solving your problem, I'll suggest you to use Function.prototype.bind to bind your callback function to the same this you have outside:
var timer;
$(".homeLinkWrap").mouseenter(function() {
timer = setTimeout((function() {
$(this).find('.homeLinkNfo').removeClass('flipOutY').addClass('flipInY').css({ opacity: '1' });
}).bind(this), 1000);
}).mouseleave(function() {
$(this).find('.homeLinkNfo').removeClass('flipInY').addClass('flipOutY');
clearTimeout(timer);
});
So im trying to add a delay to a Mouse leave event so it doesnt glitch if one is on the edge of hovering over the element
$(window).load(function(){
$("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").mouseenter(function () {
$("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").animate({
bottom: 75
});
});
$("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").mouseleave(function () {
.delay(10)//Have a delay here
$("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").animate({
bottom: -75
});
});
});
Any ideas??
I use this plugin, does a great job on avoiding 'accidental hovers'
http://cherne.net/brian/resources/jquery.hoverIntent.html
On the mouseleave event, you can use setTimeout to delay the execution of a function. Capturing the id returned from the setTimeout function allows you to prevent that function from executing with clearTimeout. So if a user puts their mouse back over the area before the delay finishes, the element won't execute the mouseleave animation.
$(document).ready(function(){
var timeoutID ;
$("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").mouseenter(function () {
// Don't execute the hide function if it hasn't executed
clearTimeout( timeoutID );
$("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").animate({
bottom: 75
});
});
$("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").mouseleave(function () {
timeoutID = setTimeout(function(){
$("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").animate({
bottom: -75
});
}, 1000) // Delay 1000 milliseconds
});
});
Here is a fiddle: http://jsfiddle.net/t829p/3/
Documentation on the setTimeout and clearTimeout functions:
https://developer.mozilla.org/en-US/docs/Web/API/Window.setTimeout
https://developer.mozilla.org/en-US/docs/Web/API/window.clearTimeout
This is my current code to run the series of setTimeout functions. How do I stop these when either the mouse moves, or is over a certain element?
$( document ).ready(function() {
clicky()
function clicky() {
setTimeout(function () {jQuery('#1500').trigger('click');}, 3000);
setTimeout(function () {jQuery('#1990').trigger('click');}, 6000);
setTimeout(function () {jQuery('#2010').trigger('click');}, 9000);
setTimeout(function () {jQuery('#battle').trigger('click');}, 12000);
setTimeout(function () {
jQuery('#water').trigger('click');clicky()
}, 15000);
}
});
You essentially need to save a reference to your timeouts so that they can be cleared when you need them to be. In the following example, I just used an object so that you could specify which timeout you wanted to affect, if desired.
Here's a working fiddle that will clear the timeouts on hover, then reset them when the mouse leaves: http://jsfiddle.net/6tQ4M/2/
And the code:
$(function(){
var timeouts = {};
function setTimeouts () {
timeouts['#1500'] = specifyTimeout('#1500', 3000);
timeouts['#1990'] = specifyTimeout('#1990', 6000);
timeouts['#2010'] = specifyTimeout('#2010', 9000);
timeouts['#battle'] = specifyTimeout('#battle', 12000);
timeouts['#water'] = specifyTimeout('#water', 15000, function(){
console.log('reset the timeouts');
clearTimeouts();
setTimeouts();
});
}
function clearTimeouts () {
for(var key in timeouts){
if(timeouts.hasOwnProperty(key)){
clearTimeout(timeouts[key]);
delete timeouts[key];
}
}
}
function specifyTimeout (id, time, callback) {
return setTimeout(function(){
$(id).trigger('click');
if(callback){
callback();
}
}, time);
}
$('a').on('click', function(){
$('#projects').append('clicky clicky!');
});
$('#map').on('mouseover', clearTimeouts);
$('#map').on('mouseleave', setTimeouts);
setTimeouts();
});
Let me know if you have any questions about the code at all!
Your setTimeout needs to be defined to a variable, so that it can be cleared by passing to clearTimeout(). Something like:
var interval = setTimeout(function() {
//msc
}, 8000);
window.clearTimeout(interval);
Well, according to what you ordered, when you hover an area, the setTimeOut should be fired, and when you are out of this region, the setTimeOut should be reset.
This is the code:
HTML
<div id="map"></div>
CSS
#map{
width:100px;
height:100px;
background-color: black;
}
Javascript
var timeoutHandle;
$('#map').mouseover(function(event){
window.clearTimeout(timeoutHandle);
});
$('#map').mouseout(function(event){
timeoutHandle = window.setTimeout(function(){ alert("Hello alert!"); }, 2000);
});
Basically you should keep a reference to the setTimeOut, in this case the variable is timeoutHandle, call clearTimeOut on mouse over and call setTimeOut again to reset the timer.
Here is the jsFiddle:
http://jsfiddle.net/bernardo_pacheco/RBnpp/4/
The same principle can be used for more than one setTimeOut timer.
You can see more technical details here:
Resetting a setTimeout
Hope it helps.
I am working on a nested menu, and when my mouse move over a option, a sublist will show up.
Here is my hover function:
$( ".sublist" ).parent().hover( function () {
$(this).toggleClass("li_hover",300); //use to change the background color
$(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
});
Now, I want add a short period before the sublist shows up to prevent the crazy mouse moving from user. Does somebody have a good suggestion on this?
Update:
Thanks for you guys, I did a little bit change on my program, recently it looks like this:
function doSomething_hover (ele) {
ele.toggleClass("li_hover",300);
ele.find(".sublist").toggle("slide", {}, 500);
}
$(function () {
$( ".sublist" ).parent().hover( function () {
setTimeout(doSomething_hover($(this)), 3000);
});
}):
This is weird that setTimeout will not delay anything. but if I change the function call to doSomething_hover (without "()"), the function will delay good. but i can not pass any jquery element to the function, so it still not works, could somebody tell me that how to make doSomething_hover($(this)) work in setTimeout ?
Update 2:
Got the setTimeout work, but it seems not what I want:
What I exactly want is nothing will happen, if the mouse hover on a option less than 0.5sec.
Anyway, here is the code I make setTimeout work:
function doSomething_hover (ele) {
ele.toggleClass("li_hover",300);
ele.find(".sublist").toggle("slide", {}, 500);
}
$(function () {
$( ".sublist" ).parent().hover( function () {
var e = $(this);
setTimeout(function () { doSomething_hover(e); }, 1000);
});
}):
Final Update:
I got this work by using clearTimeout when I move the mouse out.
so the code should be:
$( ".sublist" ).parent().mouseover( function () {
var e = $(this);
this.timer = setTimeout(function () { doSomething_hover(e); }, 500);
});
$( ".sublist" ).parent().mouseout ( function () {
if(this.timer){
clearTimeout(this.timer);
}
if($(this).hasClass("li_hover")){
$(this).toggleClass("li_hover");
}
$(this).find(".sublist").hide("slide", {}, 500);
});
This is the part in the $(document).ready(). Other code will be same as above.
真. Final Update:
So, mouseover and mouseout will lead to a bug sometime, since when I move the mouse to the sublist, the parents' mouseover event will be fire, and hide the sublist.
Problem could be solved by using hover function:
$( ".sublist" ).parent().hover(
function () {
var e = $(this);
this.timer = setTimeout(function () { doSomething_hover(e); }, 500);
},
function () {
if(this.timer){
clearTimeout(this.timer);
}
$(this).find(".sublist").hide("slide", {}, 500);
if($(this).hasClass("li_hover")){
$(this).toggleClass("li_hover",300);
}
}
);
Thanks all
Try this please:
Code
setInterval(doSomthing_hover, 1000);
function doSomthing_hover() {
$(".sublist").parent().hover(function() {
$(this).toggleClass("li_hover", 300); //use to change the background color
$(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
});
}
SetTime vs setInterval
At a fundamental level it's important to understand how JavaScript timers work. Often times they behave unintuitively because of the single thread which they are in. Let's start by examining the three functions to which we have access that can construct and manipulate timers.
var id = setTimeout(fn, delay); - Initiates a single timer which will call the specified function after the delay. The function returns a unique ID with which the timer can be canceled at a later time.
var id = setInterval(fn, delay); - Similar to setTimeout but continually calls the function (with a delay every time) until it is canceled.
clearInterval(id);, clearTimeout(id); - Accepts a timer ID (returned by either of the aforementioned functions) and stops the timer callback from occurring.
In order to understand how the timers work internally there's one important concept that needs to be explored: timer delay is not guaranteed. Since all JavaScript in a browser executes on a single thread asynchronous events (such as mouse clicks and timers) are only run when there's been an opening in the execution.
Further read this: http://ejohn.org/blog/how-javascript-timers-work/
timeout = setTimeout('timeout_trigger()', 3000);
clearTimeout(timeout);
jQuery(document).ready(function () {
//hide a div after 3 seconds
setTimeout( "jQuery('#div').hide();",3000 );
});
refer link
function hover () {
$( ".sublist" ).parent().hover( function () {
$(this).toggleClass("li_hover",300); //use to change the background color
$(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
});
}
setTimeout( hover,3000 );
....
You could use .setTimeout
$(".sublist").parent().hover(function() {
setTimeout(function() {
$(this).toggleClass("li_hover", 300); //use to change the background color
$(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
}, 1000);
});
I have this function and I am wondering why the setTimeout is not working:
$(document).ready(function() {
$('.sliding .text').css("top","130px")
$('.sliding').mouseenter(function() {
mouseOverTimer = setTimeout(function() {
$(this).find('.text').animate({"top": "0"}, 200);
}, 500);
})
.mouseleave(function() {
$(this).find('.text').delay(500).animate({"top": "130px"}, 400);
});
});
I tried wrapping the mouseenter event in the timeout, but that didn't seem like a great idea. I just want the animation on mouseenter to only work after the mouse has been over it for at least half a second.
Alternatively, is there a better way of doing it in jQuery?
The this value inside your timeout handler will not be what you think it'll be. Add an explicit variable:
$('.sliding').mouseenter(function() {
var self = this;
mouseOverTimer = setTimeout(function() {
$(self).find('.text').animate({"top": "0"}, 200);
}, 500);
})
Also you should declare "mouseOverTimer" as a local variable outside the handler setup code (that is, as a local variable of the "ready" handler) and then cancel the timeout in the "mouseleave" handler:
var mouseOverTimer = null;
$('.sliding').mouseenter(function() {
var self = this;
mouseOverTimer = setTimeout(function() {
$(self).find('.text').animate({"top": "0"}, 200);
}, 500);
})
.mouseleave(function() {
$(this).find('.text').delay(500).animate({"top": "130px"}, 400);
cancelTimeout(mouseOverTimer);
});
As I look at this, I'm pretty sure that the "mouseleave" code isn't really what you want; specifically I think the delay is probably unnecessary. I'm not 100% sure about what you want things to look like, however.
I would perhaps simplify the problem this way: On mouseover I would instantiate a new Date(), getTime() on it and stash it into a var. Then on mouseleave you take another date, grabbing the timestamp again. In that same mouseleave, do an evaluation: if the difference between date 1 and date 2 is greater than 1/2 second, you fire your action. Else, you reset date 1.
you could try this instead of using setTimeout:
$(document).ready(function() {
$('.sliding .text').css("top","130px")
$('.sliding').mouseenter(function() {
$(this).find('.text').stop().delay(500).animate({"top": "0"}, 200);
})
.mouseleave(function() {
$(this).find('.text').stop().animate({"top": "130px"}, 400);
});
});
This will delay the mouseover animation by 500ms. If you mouse out, it calls stop(), which would kill the pending animation and then animate back to the starting position. If it never moved, the mouseout animation will also not happen (correctly - it has nowhere to go).
Another way to do this
mouseIn = false;
$(document).ready(function() {
$('.sliding .text').css("top","130px")
$('.sliding').mouseenter(function() {
mouseIn = true;
mouseOverTimer = setTimeout(function() {
if(mouseIn==true)
$(this).find('.text').animate({"top": "0"}, 200);
}, 500);
})
.mouseleave(function() {
mouseIn=false;
$(this).find('.text').delay(500).animate({"top": "130px"}, 400);
});
});