jQuery：動畫功能後CSS功能不能觸發

請有人解釋爲什麼以下不起作用。這發生在同一個點擊事件，但CSS功能不是直的後，所以我不想在動畫功能上使用回調，如果可能的話。jQuery：動畫功能後CSS功能不能觸發

注意：動畫會引發火災，但是css does not。

  container.animate({ 
       left : (posLeft + slideWidth), 
      }); 


       container.css({ 
       left : '-'+(itemsLength + startX)+'px', 
      });

來源

2012-08-15 Alex Gill

所以，你要設置left屬性的CSS，而被動畫呢？ – Musa 2012-08-15 08:21:30

沒有之後，謝謝穆薩。 – 2012-08-15 08:22:49

解釋你想要它做什麼。您可能應該使用回調方法。 – Stefan 2012-08-15 08:23:24

.animate不同步，即，但絕對沒有保證.css被調用後.animate是（視覺）完成。所以在你的情況下，.animate被調用後，.css立即被調用，但left位置被.animate迅速覆蓋，內部調用setInterval。

根據該docs，第二個參數可以是一個對象，它定義的選項，其中的一個是complete

如果提供，所述完整回調功能被觸發一旦動畫完成。這對於按順序串聯不同的動畫非常有用。該回調沒有發送任何參數，但是這被設置爲正在動畫的DOM元素。如果多個元素是動畫的，則該回調將按照每個匹配的元素執行一次，而不是整個動畫的一次。

container.animate({ 
    left : (posLeft + slideWidth), 
}, { 
    complete: function() { 
     $(this).css({ // as per doc, this is the DOM element being animated 
     left : '-'+(itemsLength + startX)+'px', 
     }); 
    }) 
});

來源

2012-08-15 08:29:29

感謝SiGanteng的詳細解答，希望對他人有所幫助。 – 2012-08-15 08:39:07

jQuery：動畫功能後CSS功能不能觸發

回答

相關問題