Javascript / Jquery анимация

Question

Я немного озадачен тем, как работают javascript и jquery lib. пример. на событии щелчка я хочу, чтобы мои источники исчезли, а затем снова появились. Я подумал, что это должно сработать. Вы выполняете один код, а затем выполняете следующий. но он имеет тенденцию переключаться и затем выполнять код. Может ли кто-нибудь помочь мне понять, почему это происходит, и если есть какие-либо решения.

$('.under_box').click(function(){
var main_source=$(this).attr("src");
$("#main_image").fadeTo(300,0);
$("#main_image").attr("src",main_source).queue();
$("#main_image").fadeTo(500,1);

Answer 1

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

   $("#main_image").fadeTo(300,0, function(){
        $("#main_image").attr("src",main_source).queue();
        $("#main_image").fadeTo(500,1);
    });

Идея заключается в том, что функция обратного вызова выполняется после завершения fadeTo.

Answer 2

JavaScrypt, как известно, не блокирует, поэтому лучший способ в этом случае - установить обратные вызовы, если вы хотите ждать, чтобы что-то сделать после чего-то.

$(function(){
    var main_image = $("#main_image");
    $('.under_box').on('click', function(){
        var main_source=$(this).attr("src");
        main_image.fadeTo(300,0, function(){
            main_image.attr("src",main_source);
            main_image.fadeTo(500,1);
        });
    });
});

Также обратите внимание, что вы должны уменьшить свои переходысохраняя этот способ в DOM,

var $main_image = $("#main_image");

будет хранить в памяти объект jquery, а не извлекать его все время.