Остановить анимацию jQ
У меня проблема в том, что я не знаю, как остановить свою функцию с помощью мыши и перезапустить ее с помощью мыши
сначала мой тестовый код:
<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>
Как я могу это сделать, чтобы остановить мою функцию fadeEngine, если я перейду к contentdiv и запустил ее, если я выйду из div?
Большое спасибо за помощь
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Я не совсем уверен, что вы хотите сделать в отношении эффектов fadeIn и fadeOut в вашем fadeEngine, однако могу дать вам два совета:
Вы можете использовать эффект jQuery stop(), чтобы остановить все текущие анимации jQuery для выбранных элементов. Например:
$("#fade"+y).stop();
Остановит затухающую анимацию для этого элемента в его текущем состоянии. Затем вы можете сбросить CSS, если хотите.
Чтобы остановить вызов функции, которую вы ранее поставили в очередь с setTimeout, вы должны получить возвращаемое значение и вызвать clearTimeout(). Например:
var timeout = setTimeout('fadeEngine('+y+')',3000);
// later...
clearTimeout(timeout);
Это очистит ожидающее событие тайм-аута и предотвратит его появление.
Если это просто случай прикрепления анимации к мыши над bevahiour и т. д., Попробуйте следующее:
$(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);
});
Дайте всем вашим элементам #fadeX класс (скажем .faders), а затем используйте:
$('.faders').stop();
Или дайте контейнеру div идентификатор, например #faderbox, и скажите:
$('#faderbox div').stop();
Попробуйте применить поведение остановки к каждому элементу, который этого требует, например
$('.faders').each(function () {
$(this).mouseover(function () {
$(this).stop();
});
});