在mouseleave上停止jquery的動畫並返回到原來的位置

我試圖在盤旋到div時將其縮放到2.5。當它懸停時，它開始動畫，並在鼠標出它達到其原來的。但問題在於，當您將鼠標懸停到元素上並快速從div移除光標時，整個兩個動畫都會完成。喜歡它完全縮放到2.5，然後回到1.我想如果我在它之間的鼠標移動動畫它應該停止它的位置並返回到規模1.但無法這樣做。在mouseleave上停止jquery的動畫並返回到原來的位置

我使用jquery.transit

的jsfiddle：使用stop()也似乎並沒有工作好，因爲它閃爍的某個時候

$(".zoomable").live({ 
mouseover: function() { 
    console.log("hoverd"); 
    $(this).transition({ 
     //rotateY: '360deg', 
     scale: 2.5, 
    },2000); 
}, 
mouseout: function() { 
    console.log("hovered out"); 

    $(this).transition({ 
     //rotateY: '0deg', 
     scale: 1, 
    },2000); 

} 
});

：http://jsfiddle.net/2swqN/3/

的jQuery是。

來源

2012-11-17 kirtan403

'停止（）'是它是如何做。 'mouseenter'和'mouseleave'可能會更好。 – Sparky

我同意@Stano。我認爲整個問題都是你的插件。在Safari中工作，但與stop（）一起使用時會非常麻煩。我懷疑，因爲插件使用的是CSS3動畫，所以如果你試圖像普通的jQuery動畫那樣對待它，它不會像預期的那樣行爲。 – Sparky

但我只是不明白爲什麼它動畫後閃爍。有什麼方法可以刪除動畫。並從該位置再次啓動鼠標？ – kirtan403

考慮到您沒有使用回退，所有插件都會創建CSS3轉換。你可以自己做到這一點，而不需要插件，或任何JavaScript的事情。

.zoomable { 
    ... 
    -webkit-transition: all 2s; 
    -moz-transition: all 2s; 
    -ms-transition: all 2s; 
    -o-transition: all 2s; 
    transition: all 2s; 
} 

.zoomable:hover { 
    -webkit-transform: scale(2.5); 
    -moz-transform: scale(2.5); 
    -ms-transform: scale(2.5); 
    -o-transform: scale(2.5); 
    transform: scale(2.5); 
}

的jsfiddle：http://jsfiddle.net/2swqN/14/

編輯解決您的問題，與CSS轉換：

到動畫完成後執行代碼，你可以使用transitionEnd事件。

$('.zoomable').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend', function() { 
    alert('Transition Complete'); 
});

演示：http://jsfiddle.net/2swqN/16/

要在點擊開始動畫，使用jQuery的toggleClass()，並把轉換一個單獨的類。

$('.zoomable').on('click', function() { 
    $(this).toggleClass('active'); 
}); 

.zoomable.active { 
    /* css transforms here */ 
}

演示：http://jsfiddle.net/2swqN/17/

來源

2012-11-17 14:14:16

我知道一個！但我會動態地改變它內部的元素，並影響其他元素的數據。這就是爲什麼我想使用jQuery。 – kirtan403

我還是不明白這個問題;正如我演示的插件所做的一樣，是添加CSS轉換和轉換，您可以自己做。你能否更新你的jsFiddle來反映爲什麼CSS轉換不起作用？ –

動畫完成後有功能回調。而對於一些div應該只在點擊時開始動畫。這就是原因。 – kirtan403

在mouseleave上停止jquery的動畫並返回到原來的位置

回答

相關問題