jQuery過渡只能工作一次

我開發了一個WordPress插件來包含這個jQuery庫的功能：http://ricostacruz.com/jquery.transit/#top - 僅用於學習目的。jQuery過渡只能工作一次

這是我的頁面：http://petoria.de - 如果將鼠標移動到徽標上，它會旋轉360°。

問題：它只是旋轉一次。我希望它每次旋轉我將鼠標移動到徽標上。就像第一個提到的網站的例子一樣。

我的代碼做轉動是這樣的：

jQuery(document).on('mouseenter', '#logo', function() { 
    jQuery(this) 
     .transition({perspective: '300px', rotateX: '360deg'}, 500, 'ease-out') 
});

你也可以看到它在kmt.init.js

一）如何讓它旋轉每次我將鼠標移動到該商標？

b）heck是運行jquery.transit網站上的演示的代碼？

來源

2013-11-27 koem

您將需要重置旋轉後（在回調中），否則它不會再顯示。 – Bergi

動畫結束後重置樣式。你可以排隊復位，這樣的：

jQuery(document).on('mouseenter', '#logo', function() { 
    jQuery(this) 
     .transition({perspective: '300px', rotateX: '360deg'}, 500, 'ease-out') 
     .transition({rotateX: 0, duration: 0}); 
});

這避免了計時超過必要rotateX值較大，感覺不是每次遞增值更整潔。

來源

2013-11-27 14:45:43

這更好。謝謝！ – koem

要麼你需要重置旋轉的轉換函數的回調（它重新設置爲0度），或者你可以通過改變你的代碼

jQuery(this).transition({ 
    perspective: '+=300px', 
    rotateX: '+=360deg' 
}, 500, 'ease-out');

的+=達到同樣的增加屬性值

來源

2013-11-27 14:40:22 sjkm

就是這樣！它已經在360了！謝謝！ – koem

我認爲你需要回到零度，然後再旋轉它。

來源

2013-11-27 14:40:37 HICURIN

jQuery(document).on('mouseenter', '#logo', function() { 
    jQuery(this) 
     .transition({ 
     perspective: '+=300px', 
     rotateX: '+=360deg' 
     }, 500, 'ease-out'); 
});

使用相對值將在此工作，沒有任何代碼，然後+=增量。

來源

2013-11-27 14:44:51 MikaldL

jQuery過渡只能工作一次

回答

相關問題