2

これが私のコードです...

 $('nav ul li').hover(function() {

    $(this).addClass('hoverIn');


  },
  function() {

    $(this).addClass('hoverOut');


  });

これは正常に動作します。

しかし、delay（）とremoveClass（）を追加すると、次のように機能しません...

 $('nav ul li').hover(function() {

    $(this).addClass('hoverIn').delay(800).removeClass('hoverIn');


  },
  function() {

    $(this).addClass('hoverOut').delay(800).removeClass('hoverOut');


  });

私はここで何か間違ったことをしていますか？

どんな助けでも大歓迎です。ありがとう。

4

3 に答える 3

5

他の人が述べたように.removeClass()、アニメーション機能ではないため、キューに入れられた効果の影響を受けません。

最も簡単な解決策は.queue()、呼び出しをアニメーション キューに挿入するために使用することです。

$(this).addClass('hoverIn').delay(800).queue(function() {
    $(this).removeClass('hoverIn').dequeue();
});

この.dequeue()呼び出しは、キューに入れられた他の操作が引き続き行われるようにするために重要です。

.stop()アニメーション キューを使用すると、操作がまだ行われていない場合に を使用してキャンセルできることにも注意してください。タイマーを使用すると、それがはるかに複雑になります。

本当に凝ったものにしたい場合は、私がノックアウトしたこのプラグインを使用すると、任意の jQuery 関数をアニメーション キューに追加できます。

(function($) {
    $.fn.queued = function() {
        var self = this;
        var func = arguments[0];
        var args = [].slice.call(arguments, 1);
        return this.queue(function() {
            $.fn[func].apply(self, args).dequeue();
        });
    }
}(jQuery));

これにより、上記の行は次のようになります。

$(this).addClass('hoverIn').delay(800).queued('removeClass', 'hoverIn');

http://jsfiddle.net/alnitak/h5nWw/のデモ

于 2012-06-10T23:09:32.697 に答える
5

.delay()は、アニメーション キューを使用する jQuery メソッドでのみ機能するため、 では機能しませんremoveClass()。

removeClass()操作は引き続き実行されますが、遅延時間の後ではなく、すぐに実行されます。

だから、あなたがするとき：

$(this).addClass('hoverIn').delay(800).removeClass('hoverIn');

それは次と同じです:

$(this).addClass('hoverIn').removeClass('hoverIn');

これは何もしないのと同じで、結果が見えません。

setTimeout()次のようにして問題を解決できます。

 $('nav ul li').hover(function() {
    var self = $(this).addClass('hoverIn');
    setTimeout(function() {self.removeClass('hoverIn');}, 800);
  }, function() {
    var self = $(this).addClass('hoverOut');
    setTimeout(function() {self.removeClass('hoverOut');}, 800);
  });

または、次のような一般的な関数を使用します。

jQuery.fn.addClassTemporary = function(cls, t) {
    var self = this.addClass(cls);
    setTimeout(function() {self.removeClass(cls);}, t);
}

 $('nav ul li').hover(function() {
     $(this).addClassTemporary('hoverIn', 800);
 }, function() {
     $(this).addClassTemporary('hoverOut', 800);
 });
于 2012-06-10T22:56:11.267 に答える
1

jQuery .delay() はアニメーション キューに適用されます。setTimeout のようにタイマーとして機能しません...

あなたの目標のために、hoverIntent プラグインを使用することをお勧めします。

この実用的なフィドルの例を参照してください! 必要に応じてタイムアウトを調整します

jQuery

$("nav ul li").hoverIntent({    
    sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)    
    interval: 10,   // number = milliseconds for onMouseOver polling interval    
    timeout: 800,   // number = milliseconds delay before onMouseOut    
    over:function(){
        $(this).removeClass("hoverOut").toggleClass("hoverIn");
    },
    out: function(){
        $(this).removeClass("hoverIn").toggleClass("hoverOut");
    }
});
于 2012-06-10T23:00:04.420 に答える