動畫完成時執行代碼jQuery

Question

$(this).animate({"left": left+"px"}, { queue: false, duration: 500 }) 
.animate({"top": top+"px"}, { queue: false, duration: 500 }) 
.animate({"height": size+"px"}, { queue: false, duration: 500 }) 
.animate({"width": size+"px"}, { queue: false, duration: 500 }); 

我是jQuery的初學者。我想在動畫完成時運行以下代碼：

$('#map').css('cursor','pointer'); 

我該怎麼做？而且，如果我的代碼不好，如果你改進了，我會非常感激。

謝謝！

Answer 1

你可以一次動畫所有這些，使用"complete" callback：

$(this).animate({ 
    left: left + 'px', 
    top: top + 'px', 
    height: size + 'px', 
    width: size + 'px' 
}, { 
    queue: false, 
    duration: 500, 
    complete: function() { 
     $('#map').css('cursor','pointer'); 
    } 
}); 

Answer 2

試試這個：

$(this).animate(
    { // map of the properties to animate 
     'left': left + 'px', 
     'top': top + 'px', 
     'height': size + 'px', 
     'width': size + 'px' 
    }, 
    500, // animation duration 
    function() { // function to execute when animation is completed 
     $('#map').css('cursor','pointer'); 
    } 
); 

Answer 3

$(this).animate({"left": left+"px"}, { queue: false, duration: 500 }) 
    .animate({"top": top+"px"}, { queue: false, duration: 500 }) 
    .animate({"height": size+"px"}, { queue: false, duration: 500 }) 
    .animate({"width": size+"px"}, { queue: false, duration: 500, 
     complete : function() { 
     $('#map').css('cursor','pointer'); 
      } 
    }); 

它應該是這樣，如果我理解正確的。

Answer 4

$(this).animate({ 
    "left": left+"px", 
    "top": top+"px", 
    "height": size+"px", 
    "width": size+"px" 
},{ 
    queue: false, 
    duration: 500, 
    complete: function(){ 
    $('#map').css('cursor','pointer'); 
    } 
});