0

divにカーソルを合わせると、2.5にスケーリングしようとしています。ホバリングするとアニメーションが開始され、マウスアウトすると元のアニメーションに戻ります。しかし、問題は、要素にカーソルを合わせて div からカーソルをすばやく削除すると、2 つのアニメーション全体が完了することです。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/

クリックでアニメーションを開始するには、jQuery の を使用toggleClass()し、変換を別のクラスに配置します。

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

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

デモ: http://jsfiddle.net/2swqN/17/

于 2012-11-17T14:14:16.840 に答える