-3

このコードは、チェックマークの画像をブロックする div を作成し、右にスライドしてチェックマークが描かれているように見せます。ユーザーがほんの一瞬だけホバーしても、ユーザーがしばらくホバーしたままであるかのようにコードを実行することを除いて、すべて正常に動作します。現在、ユーザーがホバリングを停止すると、アニメーションが停止します。ありがとう！

$('li.activated').hover(function () {
    $('ul.actilist').prepend($('<div>&nbsp;</div>').addClass('slidebox'));
}, function () {
    $('ul.actilist').find('div.slidebox').remove();
});

$('li.activated').hover(function() {
    $('div.slidebox').animate({width: '-=17px', marginLeft: '+=14px'}, {duration: '800',easing: 'swing',queue: true});
}, function() {
    if( $('div.slidebox').width() < 17 ){
        $('div.slidebox').animate({width: '+=17px', marginLeft: '-=14px'}, {duration: '2000',easing: 'swing',queue: true});
    }
});
4

2 に答える 2

0

この関数を使用してsetTimeout、mouseleave イベントを遅らせることができます。

setTimeout(function() {
    $('div.slidebox').animate({width: '+=17px', marginLeft: '-=14px'}, {duration: '2000',easing: 'swing',queue: true});
}, 800);

ただし、ユーザーがマウスを外に出して急いで元に戻すと、div がさらに縮小し、タイムアウトの期限が切れた後、意図したサイズに戻るため、これではうまくいきません。(これを繰り返し行うと、div が一時的に何も表示されなくなる可能性があります。) これを防ぐには、この「キャンセルされたマウスリーブ」の場合にホバー イベントがトリガーされないようにする必要があります。それにはもう少しコードが必要です:

var hovered = false;

$('li.activated').hover(function() {
    if(hovered) return;
    hovered = true;
    $('div.slidebox').animate({width: '-=17px', marginLeft: '+=14px'}, {duration: '800',easing: 'swing',queue: true});
}, function() {
    var element = this;
    setTimeout(function() {
        if($(element).is(':hover') || !hovered) return;
        hovered = false;
        $('div.slidebox').animate({width: '+=17px', marginLeft: '-=14px'}, {duration: '2000',easing: 'swing',queue: true});
    }, 800);
});​

jsFiddle: http://jsfiddle.net/uUjhJ/2/

これはほとんどの場合機能しますが、マウスを注意深く振ると、アニメーションが「クラック」し、ふいごのようにポンピングを開始する可能性があります (アニメーション キューを通過するまで)。これは、mouseleave アニメーションの再生中にマウスを元に戻すことによって開始されます。これを修正する唯一の方法は、「キュー」オプションを false に設定し、アニメーション値を固定値に変更することです (むしろ+= と -= を使用した相対値より):

var hovered = false;

$('li.activated').hover(function() {
    if(hovered) return;
    hovered = true;
    $('div.slidebox').animate({width: '83px', marginLeft: '14px'}, {duration: '800',easing: 'swing',queue: false});
}, function() {
    var element = this;
    setTimeout(function() {
        if($(element).is(':hover') || !hovered) return;
        hovered = false;
        $('div.slidebox').animate({width: '100px', marginLeft: '0px'}, {duration: '2000',easing: 'swing',queue: false});
    }, 800);
});​

jsFiddle: http://jsfiddle.net/uUjhJ/3/

理論的には、状態を注意深く追跡し、 の呼び出しでコールバックを使用することで、元のメソッドを適切に機能させることができるはずですが、animate非常に面倒で、機能させることができませんでした。

編集: ああ、ホバー イベントで div を追加/削除したかったことを見逃しました。これは仕事をします：

var hovered = false;

$('li.activated').hover(function() {
    if(hovered) return;
    hovered = true;
    if(!$('div.slidebox').length)
        $('ul.actilist').prepend($('<div>&nbsp;</div>').addClass('slidebox'));
    $('div.slidebox').animate({width: '83px', marginLeft: '14px'}, {duration: '800',easing: 'swing',queue: false});
}, function() {
    var element = this;
    setTimeout(function() {
        if($(element).is(':hover') || !hovered) return;
        hovered = false;
        $('div.slidebox').animate({width: '100px', marginLeft: '0px'}, {duration: '2000',easing: 'swing',queue: false,complete: function() {
            if($(element).is(':hover')) return;
            $('ul.actilist').find('div.slidebox').remove();
        }});
    }, 800);
});​

要素は「完全な」コールバックで削除され、アニメーションの前ではなく後に削除され、追加コードと削除コードの両方が何かと競合していないことを再確認することに注意してください (二重追加または削除再上映されたとき）。

jsFiddle: http://jsfiddle.net/uUjhJ/4/

于 2012-06-08T06:44:40.800 に答える
-1

私はhover()関数にあまり精通していませんが、そのコードはアニメーションをキューに入れる必要があります（テストされていません）：

$('li.activated').mouseenter(function() {
    $('div.slidebox').animate({width: '-=17px', marginLeft: '+=14px'}, {duration: '800',easing: 'swing',queue: true});
}).mouseleave(function() {
    if( $('div.slidebox').width() < 17 ){
        $('div.slidebox').animate({width: '+=17px', marginLeft: '-=14px'}, {duration: '2000',easing: 'swing',queue: true});
    }
});
于 2012-06-07T16:22:18.447 に答える