Предупреждающий ящик работает первым?

Question

У меня есть jQuery/JS ниже. Первое, что нужно запустить, - это окно предупреждения в конце.

$(document).ready(function() { 
    $("#id1 img , .msg").stop().animate(
     { width: '300px', height: '300px'}, 
     { duration: 'slow', easing: 'easeInSine' }).pause(3000); 

    $(".msg").animate(
     { width: '50px', height: '50px' }, 
     { duration: 498, easing: 'easeOutSine' }); 
    $("#id1 img").animate(
     { width: '50px', height: '50px' }, 
     { duration: 500, easing: 'easeOutSine' }); 

    $("#id1 img , .msg").animate(
     { width: '300px',height: '300px'}, 
     { duration: 'slow', easing: 'easeInSine' }).pause(3000); 

    alert('eh?'); 
}); 

У меня есть easing плагин.

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

Не должно ли предупреждение запускаться в конце всей анимации?

Может ли кто-нибудь объяснить, почему это происходит?

Answer 1

Этот плагин паузы говорит, что он «содержит все в очереди» в течение указанного количества времени. Это фактически не приостанавливает выполнение (в javascript нет спать).

Итак, это точно ожидаемая вещь, что предупреждение появится первым.

Answer 2

jQuery animate не блокирует выполнение при анимации. Вместо этого он ставится в очередь только при вызове оператора $(). Вызывается animate.

Таким образом, оператор alert() был вызван первым. Но на самом деле, анимационные операторы вызывались перед alert(), только предупреждение() блокировало выполнение до завершения анимации.

Answer 3

Как отмечают другие комментаторы, метод animate не блокирует, и, следовательно, это правильное поведение. Если вы хотите, чтобы предупреждение вызывается в конце анимации, посмотрите на параметр обратного вызова метода animate. В документации указано: «Функция, которая будет выполняться всякий раз, когда анимация завершается, выполняется один раз для каждого анимированного элемента».

http://docs.jquery.com/Effects/animate

Answer 4

Так же, как и в начале кода, где у Вас есть

$(document).ready(function(){ 

That функция утверждает, что после того, как документ будет готов, загрузить функцию, которая следует. Итак, в конце анимации, которую вы запустили, вам нужно добавить еще одну функцию, сообщающую ей запустить оповещение после анимация завершается. Вот пример:

$(document).ready(function(){ 
    $("button").click(function(){ 
    $("p").animate({width:25},3000,function(){ 
     alert("The paragraph has been animated"); 
    }); 
    }); 
    }); 

Когда кнопка нажата, все р элементы их ширина усохшие до 25pixels в течение 3 секунд (JQuery читает в millisecons) и один раз, что завершает он запускает функцияпредупреждение «Абзац анимирован». Надеюсь, это поможет.