1

私は他の解決策を実装しようとしましたが、運がありませんでした...誰かが私のホバー遅延の問題を解決するのを手伝ってくれることを願っています...マウスアウトに短い遅延を追加するだけです。

前もって感謝します！

            $('.forward').css({opacity:0, right:0});
            $('.hover-area').hover(function() {
                $(this).find('.forward').stop()
                    .animate({right:20}, {queue:false, duration:300, easing:'easeOutCubic'})
                    .animate({opacity:'0.95'}, {queue:false, duration:400, easing:'easeOutCubic'});
            },function() {
                $(this).find('.forward').stop()
                    .animate({right:0}, {queue:false, duration:550, easing:'easeOutSine'})
                    .animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'});
            });
4

2 に答える 2

2

setTimeout()make delay on に使用できますmouseout。

$('.forward').css({opacity:0, right:0});

    function toogler(element, showHide) {
        if (showHide == 'show') {
            $(element).find('.forward').stop().animate({
                right: 20
            }, {
                queue: false,
                duration: 300,
                easing: 'easeOutCubic'
            }).animate({
                opacity: '0.95'
            }, {
                queue: false,
                duration: 400,
                easing: 'easeOutCubic'
            });
        } else {
            setTimeout(function() {
                $(element).find('.forward').stop().animate({
                    right: 0
                }, {
                    queue: false,
                    duration: 550,
                    easing: 'easeOutSine'
                }).animate({
                    opacity: 0
                }, {
                    queue: false,
                    duration: 300,
                    easing: 'easeOutSine'
                });
            }, 1000);
        }
    }

    $('.hover-area').hover(function() {
        toogler(this, 'show');
    }, function() {
        toogler(this, 'hide');
    });​

デモ

于 2012-05-26T06:56:56.593 に答える
0

一定時間後に関数を呼び出すsetTimeout関数を呼び出す必要があります。また、アニメーション アーティファクトに遭遇しないように、アニメーション コードへの呼び出しが存在する場所を時系列で追跡することをお勧めします。

var MOUSEOUT_ANIM_THRESHOLD = 5000;
var mouseInTime = {};

function onMouseOut( object, serial ) {
   if( serial < onMouseOut.serial ) {
       return;
   }

   $(object).find('.forward').stop()
       .animate({right:0}, {queue:false, duration:550, easing:'easeOutSine'})
       .animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'});
}

onMouseOut.serial = 0;

$('.forward').css({opacity:0, right:0});
$('.hover-area').hover(function() {
    $(this).find('.forward').stop()
        .animate({right:20}, {queue:false, duration:300, easing:'easeOutCubic'})
        .animate({opacity:'0.95'}, {queue:false, duration:400, easing:'easeOutCubic'});

    mouseInTime[this] = new Date().getTime();
},function() {
    var deltaTime = new Date().getTime() - mouseInTime[this];

    if( deltaTime < MOUSEOUT_ANIM_THRESHOLD ) {
         setTimeout(onMouseOut, 250, this, onMouseOut.serial++); //250ms delay
    } else {
          $(object).find('.forward').stop()
              .animate({right:0}, {queue:false, duration:0})
              .animate({opacity:'0'}, {queue:false, duration:0});
    }
});
于 2012-05-26T07:00:53.050 に答える