0

悬停到 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()也似乎效果不佳，因为它有时会闪烁。

4

1 回答 1

2

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

要在单击时开始动画，请使用 jQuerytoggleClass()并将变换放在单独的类中。

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

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

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

于 2012-11-17T14:14:16.840 回答