Stop jQ animation
I got a problem: I don't know how to stop my function with the mouse and restart it with the mouse.
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 can I do this to stop the fadeEngine function if im navigate through the contentdiv and start it if im navigate out of the div?
thanks for the help
I'm not sure exactly what you want to do with the fadeIn and fadeOut effects in your fadeEngine, however I can give you two tips:
You can use jQuery effect stop()
to stop all current jQuery animations for selected elements. For example:
$("#fade"+y).stop();
Will stop the fade animation for this element in its current state. You can reset the CSS if you like.
To stop calling a function that you previously queued with setTimeout
, you must get the return value and call clearTimeout()
. For example:
var timeout = setTimeout('fadeEngine('+y+')',3000);
// later...
clearTimeout(timeout);
This will clear the wait event and prevent it from appearing.
source to share
If this is just a case of attaching an 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);
});