Jquery 中转和鼠标悬停答案

【问题标题】：Jquery transit & MouseoverJquery 中转和鼠标悬停
【发布时间】：2013-08-30 14:21:14
【问题描述】：

我想用脚本在鼠标悬停时创建一个过渡动画：Transit 一切都完成了，嗯……除了一个例外。过渡有效，但是如果您在 3 个不同的块上多次通过鼠标（例如 5 次），动画将继续播放！它会产生闪烁效果，但我不喜欢... 一张图片值一千字：这是我的代码，问题在于：http://jsfiddle.net/u4Dk4/1/

感谢您的宝贵帮助。

$(function() {
    $("#A").mouseover( function() {
    $("#A").transition({ opacity: '0'}, 500);}); });
$(function() {
    $("#A").mouseout( function(){
    $("#A").transition({ opacity: '1'}, 500);}); });

【问题讨论】：

使用 css3 过渡会不会更容易？
此动画使用内置的 css 过渡。它们只是包装在 jquery 中。

标签： jquery transition mouseover mouseout jquery-transit

【解决方案1】：

您创建一个动画队列。使用 stop() 函数删除该队列。

Heres your altered Fiddle

$("#A").mouseover( function() {
$("#A").stop().transition({ opacity: '0'}, 500);}); });
$(function() {
$("#A").mouseout( 
function(){
$("#A").stop().transition({ opacity: '1'}, 500);}); });

【讨论】：