jquery - 他の関数のアニメーションが終了するのを待ちます

Question

キーワードは「他の機能で」

これが私が意味することです：

function MyFunction()
{
     $("#bob").animate({left: 300}, 1000);
}


$('a').click(function(ev){
     ev.preventDefault();
     MyFunction();

     //How can the line below execute after the animation in MyFunction is done?
     document.location = $(this).attr('href')
}

どうもありがとう ：）

Answer 1

これには2つのルートがあります。

コールバックルート：

function MyFunction(callback) {
     $("#bob").animate({left: 300}, 1000, callback);
}

$('a').click(function(ev){
     ev.preventDefault();
     MyFunction(function() { document.location = $(this).attr('href') });
}

そして延期されたルート：

function MyFunction() {
     var def = new $.Deferred();
     $("#bob").animate({left: 300}, 1000, function() { def.resolve() });
     return def.promise();
}

$('a').click(function(ev){
     ev.preventDefault();
     MyFunction()
     .done(function() { document.location = $(this).attr('href') });
}

Answer 2

function MyFunction(url)
{
     $("#bob").animate({left: 300}, 1000, function() {
         // this callback function will execute
         // after animation complete
         // so you can do the location change here
         document.location = url;
     });
}


$('a').click(function(ev){
     ev.preventDefault();
     MyFunction($(this).attr('href')); // passing the url to MyFunction()
});

使用するのが良いon()

$('a').on('click', function(ev){
     ev.preventDefault();
     MyFunction($(this).attr('href')); // passing the url to MyFunction()
});