jquery/Javascript動畫問題

Question

嗨我有一個div，其寬度與jQuery增加。我希望當這個寬度達到100％時做點什麼

$(function() { 

    $('.play').click(function() { 

    $('.loader').animate({ 
     width: "100%" 
    },1500); 
    $('.video img').attr('src','css/images/movie-click.jpg') 
    $(this).hide(); 

    if($('.loader').width()==$('.video img').width()) { 

     $('.video img').attr('src','css/images/movie.jpg') 
    } 

}); 

if語句中的某些東西是不正確的。如果有人能幫助我。我的想法是檢查with是否爲100％，如果是，則一切恢復正常。（play to be showen，width = 0％，img attr different。）

Answer 1

使用complete回調animate在動畫完成後執行代碼：

$('.play').click(function() { 
    $('.loader').animate({ 
     width: "100%" 
    }, 1500, function() { 
     // any code here will run only after the animation is complete 
     $('.video img').attr('src', 'css/images/movie.jpg'); 
    }); 
    // any code here will run as soon as the animation starts, 
    // before it's completed 
}); 

Answer 2

點擊函數中的代碼只被調用一次，所以您的if語句在動畫時不會連續運行。相反，僅僅是邏輯添加到一個回調.animate()完成後：

$('.loader').animate({ 
    width: "100%" 
},1500,swing, function() { 
    $('.video img').attr('src','css/images/movie.jpg'); 
}); 

Answer 3

東西是不正確的if語句

事實上:-)您當前的代碼只是比較CSS值由兩個.width()呼叫返回 - 當然這將是錯誤的。

這不是你如何等待動畫。動畫代碼是異步的，您的animate()調用只是開始動畫，但立即返回（並繼續隱藏按鈕並評估條件）。

相反，通過一個回調函數來animate，當動畫完成，將被執行：

$(function() { 
    $('.play').click(function() { 
     $(this).hide(); 

     var $img = $('.video img'); 
     $img.attr('src','css/images/movie-click.jpg'); 

     $('.loader').animate({ 
      width: "100%" 
     }, 1500, function() { 
      // executed after the animation 
      $img.attr('src','css/images/movie.jpg'); 
     }); 
    }); 
});