JQuery delay() - как его остановить?
Я уже попытался остановить (true, true), stop (true) и clearQueue(); но это не работает.
У меня проблема с быстрыми сменными слайдами, у меня уже есть функция, которая должна reset все, но она не работает.
function reset(){
$('div').clearQueue();
$('#img').html('').css({'left':0,'right':0,'opacity':1,'z-index':1});
$('#img2').html('').css({'left':0,'right':0,'opacity':1,'z-index':1});
$('#place').html('');$('#place').html('<div id="img"></div><div id="img2"></div>');
}
Но я считаю, что это не останавливает (или удаляет) функцию delay() при анимации. Поэтому я не знаю, не нужно ли мне использовать функцию setTimeout.
Вот фрагмент анимации script:
reset();
actual_slide=2;
$('#img').html('<img src="'+image[4]+'" alt="Obrázek">').css({'opacity':0,'z-index':2}).delay(time_delay/5).fadeTo(time_fast,1).delay(time_delay*2).fadeTo(time_fast,0);
$('#img2').html('<img src="'+image[3]+'" alt="Obrázek">').css({'opacity':'0','top':0}).fadeTo(time_fast,1).animate({'top':'-495'},time_delay*3,function(){
if(actual_slide==2){$('#img2').css({'top':0}).fadeTo(time_fast*2,0).html('');}else{reset();}
if(actual_slide==2){$('#img').html('<img src="'+image[3]+'" id="1" alt="Obrázek">').fadeTo(time_fast*2,'1').css({'left':-300,'top':-700}).animate({'left':-900,'top':-700},time_delay*2);}else{reset();}
if(actual_slide==2){$('#1').css({'width':1365,'height':1200}).animate({'width':1665,'height':1400},time_delay*2);}else{reset();}
});
Чтобы actual_slide должен был защитить его, прежде чем повторять эту функцию, но это тоже не работает. Проблема в том, что я быстро меняю слайды, потому что reset не останавливает все, и он начинает делать то, что я делаю 't хотите иметь (например, изменить изображение на другие и другие).
Ответы
Ответ 1
На странице jQuery delay:
Метод .delay() лучше всего подходит для задержки между jQuery в очереди последствия. Поскольку он ограничен - он, например, не предлагает способ отменить задержку..delay() не является заменой для родного JavaScript setTimeout, которая может быть более подходящей для определенного использования случаев.
Взгляните на doTimeout плагин; это может быть то, что вы ищете.
Надеюсь, это поможет!
Ответ 2
Вы можете разбить .delay() на .dequeue() function
вот пример
//this is only for make sure that we skip 'delay', not other function
var inDelay = false;
function start()
{
$('.gfx').animate
({
width: 100
}, function(){inDelay = true}).delay(3000).animate
({
width: 0
}, function(){inDelay = false})
}
function breakTheDelay()
{
if(inDelay)
{
$('.gfx').dequeue();
}
}
http://jsfiddle.net/wasikuss/5288z/
//edit: более сложный пример с метками времени регистрации и очисткой (без очистки, несколько кликов на Start
является непредсказуемым), чтобы доказать, что он работает
http://jsfiddle.net/q0058whc/
или ниже
//this is only for make sure that we skip 'delay', not other function
var inDelay = false;
var ltime = 0;
// console log will aways show 'end' values: 2000, 1000 an 400
// values may be different due to time wasted on calling functions
// sometimes delay is shorten by 0-200ms, it can be caused by js engine probably
function start()
{
cleanup();
ltime = (1*new Date());
$('.gfx').queue('fx', function(next)
{
logtime( 'animate1_start' );
$('.gfx').animate
({
width: 100
}, 2000, function(){logtime('animate1_end');inDelay = true;})
next();
})
.queue('fx', function(next)
{
logtime('delay_start');
next()
})
.delay(1000)
.queue('fx', function(next)
{
logtime('delay_end');
next()
})
.queue('fx', function(next)
{
logtime('animate0_start');
$('.gfx').animate
({
width: 0
}, function(){logtime('animate0_end');inDelay = false;})
next()
});
}
function cleanup()
{
// remove current queue
$('.gfx').clearQueue()
// first animate runned interval. stop it
.stop()
// reset width of element
.css('width',0)
}
function logtime( name )
{
var ntime = (1*new Date());
console.log( name + ': ' + ( ntime - ltime ) );
ltime = ntime;
}
function breakTheDelay()
{
if(inDelay)
{
$('.gfx').dequeue();
}
}
//
// version without 'inDelay' check only if you know what are you doing
// http://jsfiddle.net/wasikuss/hkw9H/
//
.gfx
{
background: red;
width: 0;
height: 10px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button onclick="start()">Start</button>
<button onclick="breakTheDelay()">Can't wait!</button>
<div class="gfx"></div>
Ответ 3
Через этот пост существует очень простой подход, который заключается в использовании .animate
вместо .delay
Ответ 4
Я хотел, чтобы пользователь быстро перезапускал анимационную цепочку снова и снова, иногда в середине анимации. Поэтому вместо того, чтобы использовать delay()
, я анимировал фальшивый CSS-код {"null":1}
. Здесь простое затухание/затухание. Кажется, сработало для меня!
//- fade in
$el.stop().animate({"opacity":1}, 200, "easeInSine", function(){
//- delay for 2000ms
$el.stop().animate({"null":1}, 2000, function(){
//- fade out
$el.stop().animate({"opacity":0}, 1000, "easeInOutSine", function(){
//- final callback
});
});
});