jQuery移動div時翻轉？

對不起，如果這是一個容易的，我是新來的jQuery。我正在使用Flip!插件來旋轉div。我也想在旋轉的時候移動div。目前，我這樣做：jQuery移動div時翻轉？

 $("#flipDiv").flip({ 
      direction:'lr', 
      content:newContent 
     }); 
     $("#flipDiv").animate({ 
      'marginLeft' : "+=150px" 
     });

它翻轉格，但動畫不運行，直到翻轉完成，而且當時去的一次。由於我對JavaScript不是很熟悉，我不知道這是否是對語言或這個特定插件的限制，或者如果我只是做錯了。有沒有人知道更好的方式可以做到這一點？

來源

2010-02-17 captncraig

我假設flip必須只是使用animate下蓋，默認情況下，您可以排隊多個動畫，然後按順序播放。爲了避免這種情況，您可以告訴給定的動畫不要排隊並立即執行。

那麼試試這個：

$("#flipDiv").flip({ 
direction:'lr', 
content:newContent 
}); 
$("#flipDiv").animate({ 
'marginLeft' : "+=150px" 
}, {queue: false});

欲瞭解更多信息，看看上animate的API文檔，以及queue和dequeue。

編輯：好吧，看着翻轉插件的源現在我相信這個問題是，當你運行flip它實際上隱藏要素（#flipDiv你的情況），創建了一個佔位符克隆它在&上執行翻轉動畫，然後在最終狀態下重新顯示原始div。這意味着即使您同時進行動畫，它也會動畫顯示隱藏的div，所以它會突然重新出現在動畫中途或完成後。

你可以嘗試，而不是動畫的克隆，您可以從onBefore回調訪問，像這樣：

$("#flipDiv").flip({ 
    direction:'lr', 
    content:newContent, 
    onBefore: function(clone) { 
    clone.animate({ 'marginLeft' : "+=150px" }, {queue: false}); 
    }) 
});

當然不會實際移動原來的div，所以當翻轉結束的div你仍然會在舊的位置，所以你也需要改變它。如果您希望動畫的時間與翻轉時間相同（或更少），那麼您可以直接設置原始的marginLeft，否則您可以對它進行動畫處理，使其大致保持同步。

來源

2010-02-17 02:53:25 Alconja

可能是這種情況。這應該工作。 – Mark 2010-02-17 02:54:36

嗯。這聽起來像是問題，但添加隊列位並不會改變行爲。插件是否有可能暫停正在進行的動畫？ – captncraig 2010-02-17 03:02:08

只是好奇，但你在測試什麼瀏覽器？ – Mark 2010-02-17 03:03:51

$("#flipDiv").flip({ 
    direction:'lr', 
    content:newContent, 
    onAnimation: function(){ 
     $(this).animate({ 
       left: '+=150px' 
     }); 
    } 
})

如果您希望移動在與翻蓋同時開始而不是半途開始，您也可以使用onBefore而不是onAnimation。

來源

2010-02-17 02:29:41 Mark

有趣，這似乎並沒有移動它。如果我將$（this）更改爲$（「＃flipDiv」），我有同樣的問題，我開始。根據插件文檔，當動畫完成一半時，onAnimation函數被同步調用。我希望他們都同時發生。 – captncraig 2010-02-17 02:40:24

我的問題是，直到旋轉完成後，它仍然沒有出現任何動作，無論何時我調用animate（） – captncraig 2010-02-17 02:44:51

您是否嘗試過使用onBefore而不是onAnimation？ – Mark 2010-02-17 02:47:45

jQuery移動div時翻轉？

回答

相關問題