Question

$(function(){
$("#obj").click(function(){
    $("#theimage").animate({height: '334px', width: '500px'},function(){
        $("#obj").click(function(){
        $("#theimage").animate({height: '150px', width: '250px' })
        });
    });
});
});

第一个animate使图像500x334并且一旦你再次点击图像就会执行回调，这会使它变小，但是回调是自动执行的（我认为这应该发生）但是我想知道是否有是一种阻止它执行的方法，然后当你点击图像时它会再次动画？当我添加一个.stop它工作一次然后之后它继续执行两次？

Answer 1

问题是你在另一个中注册一个点击处理程序，所以当第二次点击发生时你的第一个和第二个将被触发

$(function () {
    var flag = false;
    $("#obj").click(function () {
        if (flag) {
            $("#theimage").stop(true, true).animate({
                height: '150px',
                width: '250px'
            })
        } else {
            $("#theimage").stop(true, true).animate({
                height: '334px',
                width: '500px'
            });
        }
        flag = !flag;
    });
});

Answer 2

实际上callbacks用于在animation or a particular job完成后执行一组代码。因此，只要第一个animation完全执行，显然回调部分应该被执行。试试这样，

$(function(){

$("#obj").click(function(){

    if (parseInt($("#theimage").width()) === 500)
       {
          $("#theimage").stop().animate({height: '150px', width: '250px' })
       }
   else
       {
          $("#theimage").stop().animate({height: '334px', width: '500px'});
       }
 });

});

jquery .animate自动执行回调

2 个答案:

LIVE - DEMO