在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的动画并返回到原来的位置

回答

相关问题