Heim >Web-Frontend >js-Tutorial >Wie können Sie mit jQuery Aktionen auslösen, wenn ein Div sichtbar wird?

Wie können Sie mit jQuery Aktionen auslösen, wenn ein Div sichtbar wird?

Susan Sarandon
Susan SarandonOriginal
2024-11-01 03:04:02462Durchsuche

How can you trigger actions when a div becomes visible using jQuery?

Aktionen bei Div-Sichtbarkeit mit jQuery auslösen

In jQuery ist das Anhängen eines Ereignishandlers möglich, der bestimmten Code ausführt, wenn ein Div sichtbar wird. Um dies zu erreichen, sollten Sie den folgenden Pseudocode verwenden:

$(function() {
  $('#contentDiv').isvisible(function() {
    alert("do something");
  });
});

Dieser Pseudocode stellt effektiv sicher, dass die Warnung nur ausgelöst wird, wenn das #contentDiv-Div sichtbar wird.

Um diese Funktionalität zu implementieren, können Sie Erweitern Sie die ursprüngliche .show()-Methode in jQuery:

<code class="javascript">$.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');

    // Execute the original show() function with the new callback
    _oldShow.apply(obj, [speed, newCallback]);
  });
};</code>

Mit dieser Erweiterung können Sie „beforeShow“- und „afterShow“-Ereignisse auslösen, bevor und nachdem das Div sichtbar gemacht wird.

Für Beispielsweise demonstriert die folgende Verwendung die Funktionalität:

<code class="javascript">$('#test')
  .bind('beforeShow', function() {
    alert('beforeShow');
  })
  .bind('afterShow', function() {
    alert('afterShow');
  })
  .show(1000, function() {
    alert('in show callback');
  })
  .show();</code>

Das obige ist der detaillierte Inhalt vonWie können Sie mit jQuery Aktionen auslösen, wenn ein Div sichtbar wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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