jQuery один клик несколько действий

Question

Я хочу использовать jQuery для достижения нескольких эффектов. Когда пользователь нажимает на элемент, он вызывает набор функций внутри этого обработчика кликов. Есть ли способ в jQuery иметь задержку между каждым действием, выполняемым в функции?

Пример был бы:

$(function() { 
    $('.activator').on('click', function() { 
     $(this).toggleClass('animated'); 
     $('.app').css('background',$(this).css('background')); 
    }); 
}) 

Вместо того, чтобы элемент активатора выполняет анимацию, которую он получает из класса, а затем приложение получения фона, оба они происходят в то же самое время и анимация может» t даже видно. Как установить задержку между двумя или несколькими?

Спасибо!

Answer 1

Существует встроенная функция JavaScript setTimeout() для задержки действия.

Answer 2

Вы можете использовать функцию .delay(), чтобы задержать функцию, например, так:

$(function() { 
    $('.activator').on('click', function() { 
    $(this).toggleClass('animated').delay(400); // delay 400ms = 0.4s, change to any thing 
    $('.app').css('background',$(this).css('background')); 
    }); 
}) 

Вы можете добавить рядом с какой-либо функции вы хотите задержать после его вызова, поэтому код выше будет выполнять первый линии, задержки на 400 мс, а затем выполнить вторую строку.

Answer 3

Если это CSS анимации, то вам необходимо установить событие для animationend/transitionend

$('.activator').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){ 
    $('.app').css('background',$(this).css('background')); 
}); 
$('.activator').on('click', function() { 
    $(this).toggleClass('animated'); 
}); 

Demo

$('.activator').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() { 
 
    $('.app').css('background', $(this).css('background')); 
 
}); 
 
$('.activator').on('click', function() { 
 
    $(this).toggleClass('animated'); 
 
});

.activator { 
 
    transition: all 1s; 
 
    width: 200px; 
 
    height: 50px; 
 
    background: red; 
 
} 
 
.activator.animated { 
 
    height: 500px; 
 
} 
 
.app { 
 
    width: 32px; 
 
    height: 32px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="app"></div> 
 
<div class="activator">Click me</div>

Если это JQuery анимации вы будете использовать один из вариантов обратного вызова, например complete, или передать функцию обратного вызова как последний аргумент.

jQuery("div").animate({width:"500"},{ 
    complete:function(){ 
     $('.app').css('background', $(this).css('background')); 
    } 
}); 
//Or 
jQuery("div").animate({width:"500"},function(){ 
    $('.app').css('background', $(this).css('background')); 
}); 

Answer 4

Вы пытались использовать .delay() перед анимацией?

$(this).delay(500).toggleClass('animated');