在mouseleave上停止jquery的动画并返回到其原始状态

Question

当悬停在div 上时，我试图缩放到 2.5。悬停时，它会启动动画，并在鼠标悬停时进入其原始动画。但问题是，当您将鼠标悬停在元素上并快速从div 中删除光标时，整个两个动画就完成了。喜欢它完全扩展到 2.5，然后回到 1。我希望如果我在它之间鼠标悬停，它正在动画，它应该停在它所在的位置并返回到比例 1。但无法做到这一点。

我正在使用jquery.transit

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

jquery是：

$(".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);
}
});​

使用stop()似乎也不起作用，因为它有时会闪烁。

Answer 1

考虑到您没有使用回退，插件所做的只是创建 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);
}

js小提琴：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/