jQuery: сделать функцию b после завершения функции a

Question

Мне было интересно, как лучше всего выполнить вторую функцию после выполнения первой.

Например, создать анимацию, а затем добавить другой элемент:

$('.btn').click(function () {   
$("#div1").animate({
    marginTop: - 100
    }, "slow");
    $("#div2").fadeIn();
});

Этоисчезает в Div2 и одновременно оживляет div1.Некоторые люди используют задержку (), но это не очень хорошее решение, потому что некоторые браузеры работают по-разному и т. Д.

Можете ли вы предложить хорошее решение для этого, пожалуйста?Спасибо

Answer 1

Если вы используете встроенную функцию, такую ​​как animate, вы можете использовать ее функцию обратного вызова (которая выполняется после завершения анимации) следующим образом:

$('#div1').animate({marginTop: -100}, "slow", function() {
    $('#div2').fadeIn();
});

Если вы создаете свою собственную функцию; Вы можете передать ему функцию обратного вызова следующим образом:

function doSomething(param, fn){
    // Do something with function

    // Execute Callback Function //
    if (typeof fn == 'function') {
        fn.call(this); // Give Function Scope
    }
}

doSomemthing(
    param,
    function(){
        // Callback Function Goes Here
    }
)

Надеюсь, это поможет!

Answer 2

Вы можете выполнить div2.fadeIn () в полной функции animate для div1.

    $('.btn').click(function () {   
$("#div1").animate({
    marginTop: - 100
    }, "slow", function() {;
    $("#div2").fadeIn();});
});

Answer 3

Вы можете использовать Обратные вызовы .Как только возвращается первая функция, запускается вторая.Вы можете связать столько колбэков, сколько хотите.

@ felix-kling имеет пример в его посте

Answer 4

animate ^{[документы]} принимает третий аргумент, функцию обратного вызова, которая выполняется после завершения анимации:

$("#div1").animate({marginTop: - 100}, "slow", funciton() {
    $("#div2").fadeIn();
});