Comment déclencher des actions lorsqu'un div devient visible à l'aide de jQuery ?

Déclenchement d'actions lors de la visibilité d'un div à l'aide de jQuery

Dans jQuery, il est possible d'attacher un gestionnaire d'événements qui exécute du code spécifique lorsqu'un div devient visible. Pour ce faire, pensez à utiliser le pseudocode suivant :

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

Ce pseudocode garantit efficacement que l'alerte ne se déclenchera que lorsque le div #contentDiv devient visible.

Pour implémenter cette fonctionnalité, vous pouvez étendre la méthode .show() originale dans 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>

Cette extension vous permet de déclencher des événements 'beforeShow' et 'afterShow' avant et après que le div soit rendu visible.

Pour exemple, l'utilisation suivante démontre la fonctionnalité :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!