ive got the problem that i dont know how to stop my function with mouseover and restart it with mouseout
first here is my test-code:
<script type="text/javascript">
function fadeEngine(x) {
var total_divs=3; //setze hier die nummer der gewollten divs
var y=x;
if(x==total_divs) y=1; else y++;
$("#fade"+x).css("display","none");
$("#fade"+y).fadeIn("slow");
setTimeout('fadeEngine('+y+')',3000); //modifi alle 3000 miliseconds nen neuen div
}
fadeEngine(0); //Initialisation des Scripts
</script>
<script type="text/javascript">
$(document).ready(function(){
/*
$("#container").hover(function(){
stop('mouse over');
},function(){
alert('mouse out');
});
*/
/*
$("#container").hover(function()
{
$(this).stop().fadeTo("slow", 1.00);
},
function()
{
$(this).stop().fadeTo("fast", 0.50);
});
*/
});
</script>
</head>
<body>
<div id="container" style="width:200px;height:200px;background:#afafaf;color:#red;">
<div id="fade1">Content one</div>
<div id="fade2" style="display:none">Content two</div>
<div id="fade3" style="display:none">Content three</div>
</div>
<div class="blocker"> </div>
</body>
</html>
How i can do this to stop my function fadeEngine if im go over the contentdiv and start it if im move out of the div?
thanks a lot for help
Give all of your #fadeX elements a class (say .faders) and then use:
$('.faders').stop();
Or give the container div an id like #faderbox and say:
$('#faderbox div').stop();
I'm not sure exactly what you want to happen with regards to your fadeIn and fadeOut effects in your fadeEngine, however, I can give you two pieces of advice:
You can use the jQuery effect stop() to stop all current jQuery animations on selected elements. For example:
$("#fade"+y).stop();
Will stop the fading animation for that element in its current state. You can then reset the CSS if you wish.
To stop a function from being called that you previously queued with setTimeout, you must obtain the return value and call clearTimeout(). For example:
var timeout = setTimeout('fadeEngine('+y+')',3000);
// later...
clearTimeout(timeout);
This will clear the pending timeout event and prevent it from occurring.
If it's simply a case of attaching the animation to the mouse over bevahiour etc try this :
$(this).mouseover(function () {
// stops the hide event if we move from the trigger to the popup element
if (hideDelayTimer) clearTimeout(hideDelayTimer);
// don't trigger the animation again if we're being shown, or already visible
if (beingShown || shown) {
return;
} else {
beingShown = true;
// (we're using chaining) now animate
this.animate({
//some animation stuff
}, function() {
// once the animation is complete, set the tracker variables
beingShown = false;
shown = true;
});
}
}).mouseout(function () {
// reset the timer if we get fired again - avoids double animations
if (hideDelayTimer) clearTimeout(hideDelayTimer);
// store the timer so that it can be cleared in the mouseover if required
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
this.animate({
//some animation stuff
}, function () {
// once the animate is complete, set the tracker variables
shown = false;
});
}, hideDelay);
});
Try applying the stop behaviour to each element that requires it e.g.
$('.faders').each(function () {
$(this).mouseover(function () {
$(this).stop();
});
});
Related
All I'm trying to do is making a winking box. In other word I want to call a function into itself. I have this function:
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click to fade in/out box</button><br /><br /><br />
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
I want when user clicks on the button, that box fade in/out several time continuously as long as the time a request (ajax) takes. Currently when user clicks on the button, that box fades in/out once. Now I want to start fading in/out until a request ends. How can I do that?
Actually I'm trying to make a blinking box when a request is sending.
$(document).ready(function(){
function toggleForever() {
$("#div1").fadeToggle("slow", toggleForever);
}
$("button#start").click(function () {
toggleForever();
});
$("button#stop").click(function () {
$("#div1").stop().animate({opacity:1}, "slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="start">Click to fade in/out box</button>
<button id="stop">Click to stop</button><br /><br /><br />
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
The function parameter to fadeToggle gets called when the animation is complete. On another button click, we stop the animation and fade the box in (so it's always visible when we're done, no matter where in the animation we were). In your real code, you'll do that when your AJAX call is complete.
UPDATE
Another approach, using CSS animations instead. One notable difference here is stopping the animation moves abruptly back to full opacity.
$(function () {
$('#start').click(function () {
$('#div1').addClass('blinking');
});
$('#stop').click(function () {
$('#div1').removeClass('blinking');
});
});
.blinking {
animation: blinker 600ms linear infinite alternate;
}
#keyframes blinker { to { opacity: 0; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="start">Click to fade in/out box</button>
<button id="stop">Click to stop</button><br /><br /><br />
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
In jQuery there are some global ajax events.
You may listen for ajaxStart, ajaxComplete like in:
$(function () {
$( document ).ajaxStart(function() {
// Start your animation
});
$( document ).ajaxComplete(function() {
// End your animation
});
});
My snippet:
// utility function to wait (simulate ajax)
$.wait = function(ms) {
var defer = $.Deferred();
setTimeout(function() { defer.resolve(); }, ms);
return defer;
};
var isAjaxEnded = true;
$(function () {
$("#div1").click(function(){
$(this).fadeToggle("slow", function() {
if (!isAjaxEnded)
$("#div1").trigger('click');
});
});
$( document ).ajaxStart(function() {
isAjaxEnded = false;
$("#div1").trigger('click');
});
$( document ).ajaxComplete(function() {
// the next line is commented because I'm simulating...
//isAjaxEnded = true;
// End your animation
});
$.getJSON('https://api.github.com/users').done(function(data) {
// just wait only 3 seconds
$.wait(3000).then(function() {
isAjaxEnded = true;
});
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
You can use SetInterval to run the on off cycle continuously and end it with ClearInterval.
var _timer1;
var _timer2;
$(document).ready(function(){
$("#BtnStart").click(function(){
_timer1 = setInterval(function(){ $("#div1").fadeToggle("slow"); }, 500);
_timer2 = setInterval(function(){ $("#div1").fadeToggle("slow"); }, 1000);
});
//Call stop stop annimation
$("#BtnStop").click(function(){
clearInterval(_timer1);
clearInterval(_timer2);
});
});
I'm trying to make a navigation using jQuery. I'm very new to jQuery so I'm getting a bit stuck here.
Basically what I'm trying to do is have testbutton2 appear and hide when I mouse over/off testbutton1. I was able to get this to work with mouseenter/leave.
The part I'm trying to add is to keep testbutton2 visible when I have the mouse over testbutton2 and to keep testbutton2 visible if I cursor back onto testbutton1 - so only fade in or out once.
You'll see from my code exactly what I encountered and probably have a chuckle.
CSS
#testbutton1 {
float:left;
height:100px;
width:100px;
background:#69C;
}
#testbutton2 {
float:left;
height:100px;
width:100px;
background:#0C6;
display:none;
}
HTML
<div id="testbutton1"></div>
<div id="testbutton2"></div>
jQuery
$("#testbutton1").on({
mouseenter: function() {
$("#testbutton2").fadeIn();
},
mouseleave: function() {
$("#testbutton2").fadeOut();
},
});
$("#testbutton2").on({
mouseenter: function() {
$("#testbutton2").fadeIn();
},
mouseleave: function() {
$("#testbutton2").fadeOut();
},
});
JSFiddle
DEMO
Or you can do it in pure css.
Wrap both buttons in a larger div and show the second button only while the mouse hovers over the larger div:
<div id="buttons">
<div id="testbutton1"></div>
<div id="testbutton2"></div>
</div>
#buttons:hover div {
display:block;
}
http://jsfiddle.net/r267b/1/
You can do something like
$("#testbutton1").on({
mouseenter: function () {
$("#testbutton2").fadeIn();
},
mouseleave: function () {
var $target = $("#testbutton2");
//delay the fade out to see whether the mouse is moved to the second button
var timer = setTimeout(function () {
$target.stop(true, true).fadeOut();
}, 200);
$target.data('hoverTimer', timer);
}
});
$("#testbutton2").on({
mouseenter: function () {
//if mouse is moved inside then clear the timer so that it will not get hidden
clearTimeout($(this).data('hoverTimer'));
$(this).stop(true, true).fadeIn();
},
mouseleave: function () {
$(this).stop(true, true).fadeOut();
}
});
Demo: Fiddle
This is solved with timers, as Arun P Johny said...
But as far as I saw, what you want to do is a menu.
Have you thought about using jQuery UI menu widget?
http://jqueryui.com/menu/
I suggest to use status variables that stores if you are hovering over button1 or over button2.
var isOver1 = false;
var isOver2 = false;
Then, add conditions to mouseleave and mouseenter in order to set hide or to alter the status variables, e.g.:
mouseleave: function() {
isOver1 = false;
window.setTimeout( function() {
if (!isOver2) {
isOver2 = false;
$("#testbutton2").fadeOut();
}
}, 50);
The timeout is necessary because if you leave testbutton1, you are not entering testbutton2 at exact the same time. So waiting a bit allows to fire the testbutton2 enter event.
Here is the full demo:
http://jsfiddle.net/KTULJ/2/
Leaving button1 to button2 keeps button2, leaving back to button1 still keeps button2, leaving any button towards the space around hides button2.
With this approach, you don't need to stop an animation as it doesn't start one if it is not necessary.
I am showing the image preview when hovering over the image. Now I do keep the interval before displaying the preview image. say I set the delay as 1 sec, and within this if I dragged the mouse out of image, it still displays the preview since it is triggered during the mouse enter . How to fix this?
I need to display a preview only on hover after 1sec delay and not if the mouse is not with in the image?
On jQuery 1.9+, you could use delay/finish:
DEMO jsFiddle
$("#preview").hover(function(){
$("img").delay(1000).show(0); // passing 0 to show() will put animation in queue
}, function(){
$("img").finish().hide(); // finish() will clear any previous delay(), despite what argues the DOC
});
A basic skeleton using setTimeout() can be
var timer;
$('img').hover(function () {
timer = setTimeout(function () {
//do your stuff here
$('div').show();
timer = undefined;
}, 1000);
}, function () {
if (timer) {
clearTimeout(timer);
timer = undefined;
} else {
//hide the preview
$('div').hide();
}
})
Demo: Fiddle
Assign the setTimeout to a variable on mouseover event like this:
var timer = setTimeout(function() { doSomething(); }, 1000);
And then clear it on mouseout event so it doesn't show when you hover out of it:
clearTimeout(timer);
How do I make my .right-menu DIV to fadein only after a couple of moments the mouse is hovering its parent .right-menu-background ? The thing is that when you move the cursor quickly in and out, .right-menu DIV is reappearing a lot of times after.
How do I delay animation for few ms?
Here's the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").fadeIn();
}
,function(){
$(this).find(".right-menu").fadeOut();
}
);
});
a easy fix is to use .stop()
$(function () {
$(".right-menu-background").hover(function () {
$(this).find(".right-menu").stop(true, true).fadeIn();
}, function () {
$(this).find(".right-menu").stop(true, true).fadeOut();
});
});
using timer
$(function () {
$(".right-menu-background").hover(function () {
var el = $(this).find(".right-menu");
var timer = setTimeout(function(){
el.stop(true, true).fadeIn();
}, 500);
el.data('hovertimer', timer);
}, function () {
var el = $(this).find(".right-menu");
clearTimeout(el.data('hovertimer'))
el.stop(true, true).fadeOut();
});
});
Use the stop() function in front of fading calls ...stop(true, true)
With those two parameters set to true, the animation queue is cleared and the last animation is played this will get ride of the weird effect
$(this).find(".right-menu").stop(true, true).fadeIn();
Use .delay() function.
Here is the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").delay(800).fadeIn(400);
},function(){
$(this).find(".right-menu").fadeOut(400);
});
});
Check the demo here: http://jsfiddle.net/Mju7X/
I have an element in aspx page with class= "._aHide" it carrying a message, And it is shown repeatedly.
<div id="Message1" class="._aHide" runat="server" visible="true"><p>My Message</p></div>
aspx server side elements not created when page load if it's visible property = true.
I need to hide this div after 7 seconds of show it, unless mouse over.
I created this code
$(document).ready(function () {
var hide = false;
$("._aHide").hover(function () {
clearTimeout(hide);
});
$("._aHide").mouseout(function () {
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
hide;
});
$("._aHide").ready(function () {
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
hide;
});
});
But somthings wrong here
1- this code work for one time only, And I show this message many times.
2- All message boxes hides in one time, because I can't use $(this) in settimeout and I don't know why.
Thank you for your help, and I really appreciate it
Remove the point in the HTML code:
<div id="Message1" class="_aHide" runat="server" visible="true"><p>My Message</p></div>
See: http://api.jquery.com/class-selector/
tbraun89 is right, remove the "." in your html code.
Then, you can simplify your code like this :
JQuery hover have 2 functions using mouseenter and mouseleave
$(document).ready(function () {
var hide = false;
$("._aHide").hover(
function () {
//Cancel fadeout
clearTimeout(hide);
},
function(){
//re-set up fadeout
clearTimeout(hide);
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
});
//Set up fadeout
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
});