Heim  >  Artikel  >  Web-Frontend  >  jQuery implementiert den verzögerten Verarbeitungseffekt der Mausübergabe an event_jquery

jQuery implementiert den verzögerten Verarbeitungseffekt der Mausübergabe an event_jquery

WBOY
WBOYOriginal
2016-05-16 15:35:141510Durchsuche

JQuery-Maus über (Hover) Ereignisverzögerungsverarbeitung, der spezifische JS-Code lautet wie folgt:

(function($){ 
  $.fn.hoverDelay = function(options){ 
    var defaults = { 
      hoverDuring: 200, 
      outDuring: 200, 
      hoverEvent: function(){ 
        $.noop(); 
      }, 
      outEvent: function(){ 
        $.noop(); 
      } 
    }; 
    var sets = $.extend(defaults,options || {}); 
    var hoverTimer, outTimer; 
    return $(this).each(function(){ 
      $(this).hover(function(){ 
        clearTimeout(outTimer); 
        hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring); 
      },function(){ 
        clearTimeout(hoverTimer); 
        outTimer = setTimeout(sets.outEvent, sets.outDuring); 
      }); 
    }); 
  } 
})(jQuery); 

Die hoverDelay-Methode hat vier Parameter, was Folgendes bedeutet:
schwebenWährend Verzögerungszeit der Mausbewegung
outWährend  Mouse-Out-Verzögerungszeit
hoverEvent Methode, die nach dem Passieren der Maus ausgeführt wird
outEvent       Methode, die ausgeführt wird, wenn die Maus herausbewegt wird
Der Zweck dieser Funktion besteht darin, das Mauspassereignis und die Verzögerung zu trennen und die Verzögerung zu löschen. Sie müssen lediglich die Verzögerungszeit und das entsprechende Mauspass- oder Entfernungsereignis festlegen. Nehmen wir ein einfaches Beispiel für wie folgt:

$("#test").hoverDelay({ 
  hoverDuring: 1000, 
  outDuring: 1000, 
  hoverEvent: function(){ 
    $("#tm").show(); 
  }, 
  outEvent: function(){ 
    $("#tm").hide(); 
  } 
}); 

Das Folgende ist ein prägnanterer Fall:

$("#test").hoverDelay({ 
  hoverEvent: function(){ 
    alert("经过 我!"); 
  } 
});

bedeutet, dass das Element mit der ID-Prüfung 200 Millisekunden nach dem Überfahren mit der Maus ein Popup-Fenster mit dem Text „Pass me!“ öffnet.

Das Obige dreht sich um die verzögerte Verarbeitung des jQuery-Mouse-Over-Ereignisses. Ich hoffe, es wird für das Lernen aller hilfreich sein.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn