Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie erkennt man Sichtbarkeitsänderungen für Elemente in jQuery?

Susan Sarandon
Freigeben: 2024-10-30 00:25:02
Original
309 Leute haben es durchsucht

How do you detect visibility changes for elements in jQuery?

Sichtbarkeitsänderungen mit jQuery erkennen

Bei der Arbeit mit dynamischen Inhalten ist es notwendig, Aktionen basierend auf der Sichtbarkeit bestimmter Elemente durchzuführen. jQuery bietet eine Möglichkeit, Ereignishandler anzuhängen, die ausgelöst werden, wenn ein Div sichtbar wird.

Lösung:

Um dies zu erreichen, können Sie die vorhandene jQuery .show() erweitern. Methode und Triggerereignisse vor und nach der Sichtbarkeitsänderung. Hier ist ein benutzerdefinierter Erweiterungscode-Snippet:

jQuery(function($) {

  var _oldShow = $.fn.show;

  $.fn.show = function(speed, oldCallback) {
    return $(this).each(function() {
      var obj         = $(this),
          newCallback = function() {
            if ($.isFunction(oldCallback)) {
              oldCallback.apply(obj);
            }
            obj.trigger('afterShow');
          };

      // Trigger beforeShow event
      obj.trigger('beforeShow');

      // Call the original show method with the new callback
      _oldShow.apply(obj, [speed, newCallback]);
    });
  }
});
Nach dem Login kopieren

Verwendung:

Um die erweiterte .show()-Methode zu verwenden, können Sie Ereignisse an die Auslöser beforeShow und afterShow binden . Zum Beispiel:

jQuery(function($) {
  $('#test')
    .bind('beforeShow', function() {
      alert('beforeShow');
    }) 
    .bind('afterShow', function() {
      alert('afterShow');
    })
    .show(1000, function() {
      alert('in show callback');
    })
    .show();
});
Nach dem Login kopieren

Dieser Code löst die Ereignisse beforeShow und afterShow aus, wenn das Div mit dem ID-Test angezeigt und ausgeblendet wird, sodass Sie benutzerdefinierten Code basierend auf der Sichtbarkeitsänderung ausführen können.

Das obige ist der detaillierte Inhalt vonWie erkennt man Sichtbarkeitsänderungen für Elemente in jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!