2

私が取り組んでいるWebアプリケーションでは、マウスオーバーとマウスアウトで上下に移動するいくつかのスライダーを作成したいと考えています(それぞれ) 。 . 実際、これはかなりうまく機能します。divhover()animate()top

詰まりやすいのが難点です。マウスをその上 (特に下部近く) に移動し、すばやく離すと、連続して上下にスライドし、3 ～ 5 サイクルが完了するまで停止しません。私には、この問題は、別のアニメーションが完了する前に開始される 1 つのアニメーションに関係しているように思われます (たとえば、2 つのアニメーションが実行しようとしているために、前後にスライドします)。

さて、コードです。私が使用している基本的なJQueryは次のとおりです。

$('.slider').hover(
    /* mouseover */
    function(){
        $(this).animate({
            top : '-=120'
        }, 300);
    },
    /* mouseout*/
    function(){
        $(this).animate({
            top : '+=120'
        }, 300);
    }
);

JSFiddleでの動作も再現しました。

何が起こっているかについてのアイデアはありますか？:)

==編集==更新されたJSFiddle

4

5 に答える 5

3

完璧ではありませんが、追加.stop(true,true)すると、表示されているもののほとんどが妨げられます。

http://jsfiddle.net/W5EsJ/18/

下から上にすばやくホバーすると、マウスをdivの外に移動しているため、マウスアウトイベントが発生し、divが下にアニメーション化されるため、ちらつきが発生します。

遅延を減らすことでちらつきを減らすことができますが、遅延が0になるまでちらつきは残ります（アニメーションなし）

アップデート

私はそれについて考え、これには明らかな解決策があることに気づきました。ホバーインテントのような機能！

http://jsfiddle.net/W5EsJ/20/

$(document).ready(function() {
    var timer;
    $('.slider').hover(
        /* mouseover */
        function(){
            var self = this;
            timer = setTimeout(function(){
                $(self).stop(true,true).animate({
                    top : '-=120'
                }, 300).addClass('visible');
            },150)
        },
        /* mouseout*/
        function(){
            clearTimeout(timer);
            $(this).filter(".visible").stop(true,true).animate({
                top : '+=120'
            }, 300).removeClass("visible");
        }
    );
});
于 2012-06-04T15:43:51.953 に答える
3

.stop()を使用し、外側のコンテナの位置も使用できます

$(document).ready(function() {
    $('.slider').hover(
        /* mouseover */
        function(){
            $(this).stop().animate({
                    top : $('.outer').position().top
            }, 300);
        },
        /* mouseout*/
        function(){
            $(this).stop().animate({
                top : $('.outer').position().top + 120
            }, 300);
        }
    );
});
​

デモ

お役に立てれば

于 2012-06-04T14:56:24.793 に答える
1

問題を再現できませんでしたが、hover複数回呼び出されていると思います。これを回避するには、div が既にアニメーション化されているかどうかを確認します。はいの場合は、別のアニメーションを再度実行しないでください。

次のコードを追加して、div が既に「アニメーション化」されているかどうかを確認します。

if ($(this).is(':animated')) {
   return;
}

コード: http://jsfiddle.net/W5EsJ/2/
参照: http://api.jquery.com/animated-selector/

于 2012-06-04T14:49:37.847 に答える
1

問題を理解して再現しました。下から上にホバリングすると発生します。マウスを画像の上に置くとアニメーション関数が呼び出されるため、マウスでホバリングすることが問題の原因です。マウス エンターとマウス リーブを使用して、ここで何が起こるかを制御する必要があります。同様の例を確認してください: Jquery Animate on Hover

于 2012-06-04T15:01:29.690 に答える
1

そのような理由は、ホバーがキューに入れられて、何度も上下にスライドするためです。この問題を修正する hoverIntent というプラグインがあります。 http://cherne.net/brian/resources/jquery.hoverIntent.html

hoverIntent を使用することにした場合、コードで変更する必要があるのは .hover > .hoverIntent だけです。

于 2012-06-04T15:06:14.717 に答える