Wie erkennt man Sichtbarkeitsänderungen für Elemente 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]);
    });
  }
});

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();
});

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!