不能重複動畫 - jQuery的交通

我不能讓我的動畫，不只是一次重演。

這是我的jQuery：

$('.cart').mouseenter(function(){ 
    $('.cartIcon').transition({ 
     perspective: '500px', 
     rotateY: 360 , 
     duration: 400, 
     easing: 'in' 
    }); 
});

來源

2013-04-14 drummerdude545

不能得到任何掛鉤這一點。似乎我們可以使用'complete'回調再次完成設置轉換，但儘管它被調用，但不會再次創建動畫。也許我們需要一些方法來清除現有的過渡。如果以後有任何時間，我們會研究它。 – TheVillageIdiot

謝謝，如果你能想出來，將不勝感激 – drummerdude545

你可以用jsfiddle複述這個嗎？ http://jsfiddle.net/ –

你的問題是，第一次轉換您的購物車圖標，你旋轉它360度。第二次轉換它時，它仍然有這個狀態。所以你再次轉換它......從360度到 360度，這意味着什麼都沒有發生。爲了讓它每次都具有動畫效果，你需要選擇一些將它轉換回來的方法。

http://jsfiddle.net/rFKw8/2/

這僅僅是一種可能性：

$('.cart').mouseenter(function(){ 
    var $cart = $(this), 
     $cartIcon = $cart.find('.cartIcon'), 
     transitionOptions = { 
      perspective: '500px', 
      duration: 500, 
      easing: 'in' 
     }; 

    if (!$cart.data('transitioned')) { 
     transitionOptions.rotateY = 360; 
     $cartIcon.transition(transitionOptions, function() { 
      $cart.data('transitioned', true); 
     }); 
    } else { 
     transitionOptions.rotateY = 0; 
     $cartIcon.transition(transitionOptions, function() { 
      $cart.data('transitioned', false); 
     }); 
    } 
});

來源

2013-04-19 01:37:45 Nate

好吧，現在有道理。我新編寫jQuery，所以我仍然有很多東西要學。非常感謝！這就像一個魅力 – drummerdude545

這是一個很好的問題，它與語法無關 - 你做的一切都是正確的。這個問題是概念性的，並且依賴於真正理解你用你的代碼完成了什麼。祝jQuery好運 - 這是一個非常棒的圖書館。 – Nate

不能重複動畫 - jQuery的交通

回答

相關問題