Comment détecter les changements de visibilité des éléments dans jQuery ?

Détection des changements de visibilité avec jQuery

Lorsque vous travaillez avec du contenu dynamique, il devient nécessaire d'effectuer des actions basées sur la visibilité d'éléments spécifiques. jQuery fournit un moyen d'attacher des gestionnaires d'événements qui se déclenchent lorsqu'un div devient visible.

Solution :

Pour y parvenir, vous pouvez étendre le jQuery .show() existant. méthode et déclencher des événements avant et après le changement de visibilité. Voici un extrait de code d'extension personnalisé :

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

Utilisation :

Pour utiliser la méthode .show() étendue, vous pouvez lier des événements aux déclencheurs beforeShow et afterShow . Par exemple :

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

Ce code déclenchera les événements beforeShow et afterShow lorsque le div avec le test d'ID est affiché et masqué, vous permettant d'exécuter du code personnalisé en fonction du changement de visibilité.

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!