i am making a something like this :
When a user mouseenter DIV1 , the DIV2 will fadeIn and when the user mouseout DIV1 , DIV2 will fadeOut
But something weird is happening , when you hover in and out DIV1 quickly , the FADEIN and OUT effect of DIV2 will repeat the total number of your hovers in.
For example:
i quickly hovers in and out for 10 times # DIV1 , DIV2 will continue to FADE IN and OUT for 10 times although my mouse is not hovering it.
I hope people understand what i'm saying.
CODE:
$('div1').bind('mouseenter', function() {
$('div2').fadeIn(600);
});
$('div1').bind('mouseout', function() {
$('div2').fadeOut(600);
});
Thanks and have a nice day .
use .stop(true,true) on the mouseout event that will stop all the existing animations
here is the working fiddle http://jsfiddle.net/XkmFy/
You can stop the existing animation when you start a new animation instead of stacking them up:
$('div1').bind('mouseenter', function() {
$('div2').stop().fadeIn(600);
});
$('div1').bind('mouseout', function() {
$('div2').stop().fadeOut(600);
});
You want .stop, which stops the current animation so that the animation queue does not get filled up with deferred animations: http://jsfiddle.net/pQQ2G/.
$('#div1').bind('mouseenter', function() {
$('#div2').stop().fadeIn(600);
});
$('#div1').bind('mouseout', function() {
$('#div2').stop().fadeOut(600);
});
Also, you shuold use #div1. div1 selects div1 elements, whereas you have div elements I suppose.
use this
$('div1').bind('mouseenter', function() {
$('div2').fadeIn(600).stop(true, true);
});
$('div1').bind('mouseout', function() {
$('div2').fadeOut(600).stop(true, true);
});
hope it helps
Related
I'm trying to show an overlay div when '.menu' is hovered over. I've used hover to show the div (hidden first with CSS), the mouseleave to reset it. How can I do it so the mouse needs to be on the menu for a couple of seconds for it to show, so if its just rolled over quickly it doesnt do anything. I know I can do this with delay() but if i go over the button quickly 5 times, the screen flashes 5 times with the overlay. How can i make it only do it once and then terminate.
Thanks.
$( document ).ready(function() {
$(".menu").hover(function() {
$(".page-overlay").delay(600).fadeIn(200);
});
$(".menu").mouseleave(function() {
$(".page-overlay").fadeOut(200);
});
});
jQuery's hover method accommodates for the mouse entering and leaving events, so you don't really need to make an explicit mouseleave event handler.
hover works like this:
$( ... ).hover(function(){
// Here is the mouse entering function
},
function(){
// Here is the mouse exiting function
});
So you can adjust your code to something like this:
$(".menu").hover(function() {
$(".page-overlay").delay(600).fadeIn(200);
},
function(){
$(".page-overlay").fadeOut(200);
});
You can use setTimeout and clearTimeout, check example bellow.
I can do this with delay() but if i go over the button quickly 5 times, the screen flashes 5 times with the overlay
Using the clearTimeout() function in hoverOut() in example bellow will resolve this problem.
Hope this helps.
$( document ).ready(function() {
var menu_hover_timer;
$(".page-overlay").hide();
$( ".menu" ).hover(
function() {
menu_hover_timer = setTimeout(function(){
$(".page-overlay").fadeIn(200);
},1000); //wait 1 seconds
}, function() {
clearTimeout(menu_hover_timer)
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='menu'>
Menu (Stay hover 1 second HERE)
</div>
<div class='page-overlay'>
page overlay div
</div>
I'm not super proficient at this, but I have a navigation item where on hover, a div with a search form slides down. Currently, when you mouseover, then mouseout, the div stays open until you click the close button.
I'm trying to make it so that when you mouseout the div slides backup after a few seconds, unless the user is on the div or nav link still (i.e., they're filling out the search form).
Here's what I have so far:
$("#services_link").mouseover(function() {
$("#services_link").css('background-position','left -73px');
$("#vendors_dropdown").slideDown(function() {
setTimeout(HideMe, 4000);
});
});
function HideMe() {
$("#services_link").css('background-position','left 0');
$("#vendors_dropdown").slideUp();
}
That gets me as var as the div sliding down on hover of the link, and sliding up after 4 seconds (regardless of where the mouse cursor is). So I just need the div to stay open if the mouse cursor is on the link or div.
I've looked at 3 or 4 other similar questions (and answers) and none really quite do the trick. setTimeout (and clearTimeout) is kinda new to me, so please excuse the noob question. :)
Bind both mouseenter and mouseleave. You'll want to do the timeout on the mouseleave, but then reset it when/if the mouseenter happens again.
Try looking at just the selected answer here to see how to do what I'm talking about.
Something like this:
var timeout;
$("#services_link, #vendors_dropdown").mouseenter(function() {
window.clearTimeout(timeout);
$("#services_link").css('background-position','left -73px');
$("#vendors_dropdown").slideDown();
}).mouseleave(function(){
timeout = window.setTimeout(HideMe, 4000);
});
function HideMe() {
$("#services_link").css('background-position','left 0');
$("#vendors_dropdown").slideUp();
}
I have the following code:
$(document).ready(function () {
$("#full-btns").children().delay(4000).fadeOut("slow");
$('#full-btns').hover(function() {
$('#full-btns').children().stop().animate({opacity:'100'});
$('#full-btns').children().show();
}, function() {
$("#full-btns").children().fadeOut("slow");
});
When the page is loaded, the #full-btns element is shown for 4000ms before fading out. The problem I have is that if a user hovers over the #full-btns element while its still visible, it causes it to fade out because $("#full-btns").children().fadeOut("slow"); is called on the hover. I want #full-btns to always be visible when hovering over it.
When the page loads, hover over the red div, notice how it fades out. That is undesirable. When hovering over the red div (while its visible) it should remain visible
Update:
http://jsfiddle.net/gazedge/nhBBc/ (now includes solution)
Use setInterval and clearInterval;
$('#full-btns').hover(function() {
clearInterval(refreshIntervalId);
$('#full-btns').children().stop().animate({opacity:'100'});
$('#full-btns').children().show();
}, function() {
$("#full-btns").children().fadeOut("slow");
});
var refreshIntervalId = setInterval(function() {
$("#full-btns").children().fadeOut("slow");
}, 4000);
If I haven't misunderstood the question - can't you just return false; at the end of your hover calls to prevent the events bubbling?
http://www.quirksmode.org/js/events_order.html
http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/
The only thing you have to do is clear all animation before anyone hovers.
$("#full-btns").children().delay(4000).fadeOut("slow");
$('#full-btns').hover(function() {
$('#full-btns').children().stop(true, true); // Stop the fade-out animation
$('#full-btns').children().stop().animate({opacity:'100'});
$('#full-btns').children().show();
}, function() {
console.log('fadeOout called');
$("#full-btns").children().fadeOut("slow");
});
http://jsfiddle.net/nhBBc/5/
Note: First time when you hover and (in your code) the div fades out it is not because of $("#full-btns").children().fadeOut("slow"); but because it is just completing the earlier animation which you have applied. [ your 1st line ].
I have following code:
HTML:
<div class="one">Content</div>
<div class="two">Content</div>
I want to hide my second div when mosueleave event happen from first div and also the mouse don't have over second div.
Algorithm:
if ((mouseleave from div.one) && (mouse not on div.two))
hide (div.two);
How can I implement this snippet using jquery? please help me.
You can set a flag on the .two div that keeps track of the mouseover state. Then when the mouse leaves .one you check for this state and if it exists you hide the div. Like so:
$(".two").live("mouseenter", function(){
$(this).data("hover", true);
}).live("mouseleave", function(){
$(this).removeData("hover");
});
$(".one").live("mouseleave", function(){
if( !$(".two").data("hover") ) $(".two").hide();
});
enclose both divs in another, say, div class='zero'. so you would have something in your $(document).ready() like
$('.zero').live('hover', function() {
$('.two').show();
});
$('.zero').live('blur', function() {
$('.two').hide();
});
note: you must style="display: none" for div class='two' by default
I have a basic div element to represent a message that I show for a few seconds and then fade it out using
$('#message').fadeOut(5000);
I want to be able to cancel the fade out if the user hovers their mouse over the div.
How can I cancel the fade out once the fadeOut method has started to fade the div?
My existing code, below, works if the mouse enters the div whilst it is being shown but I need to allow for if the user hovers over the div once it has started to fade.
$('#message').mouseenter(function() {
clearTimeout(this.timeout);
});
$('#message').mouseleave(function() {
this.timeout = setTimeout("$('#message').fadeOut(5000)", 3000);
});
$('#message').fadeIn(2000, function() {
this.timeout = setTimeout("$('#message').fadeOut(3000)", 3000);
});
Check out the stop function
http://docs.jquery.com/Effects/stop#clearQueuegotoEnd
Also, you can test if an element is in the middle of an animation using the :animated selector:
$('#message').mouseover(
function () {
if($(this).is(':animated')) {
$(this).stop().animate({opacity:'100'});
}
}
);
In my case stop() merely didn't work at least in Firefox, after searching I figured out that It should be stop(true, true):
$('#message').mouseover(
function () {
$(this).stop(true, true).fadeOut();
}
);
stop(): Stops the currently-running animation on the matched elements.
or even you can use finish() instead:
$('#message').mouseover(
function () {
$(this).finish().fadeOut();
}
);
but there is a side effect about finish(), it stops all other running animations too.
finish(): Stops the currently-running animation, remove all queued animations, and complete all animations for the matched elements.
Read more here.