jQuery événement pour déclencher l'action quand une div est rendue visible

il n'y a pas d'événement natif dans lequel vous pouvez vous connecter pour cela, cependant vous pouvez déclencher un événement à partir de votre script après avoir rendu le div visible en utilisant le . déclencheur fonction

E. g

//declare event to run when div is visible
function isVisible(){
   //do something

}

//hookup the event
$('#someDivId').bind('isVisible', isVisible);

//show div and trigger custom event in callback when div is visible
$('#someDivId').show('slow', function(){
    $(this).trigger('isVisible');
});

Le problème est pris en charge par DOM mutation observateurs . Ils vous permettent de lier un observateur (une fonction) à des événements de changement de contenu, de texte ou d'attributs d'éléments dom.

avec la sortie de IE11, tous les principaux navigateurs supportent cette fonctionnalité, cochez http://caniuse.com/mutationobserver

le code de l'exemple est le suivant:

$(function() {
  $('#show').click(function() {
    $('#testdiv').show();
  });

  var observer = new MutationObserver(function(mutations) {
    alert('Attributes changed!');
  });
  var target = document.querySelector('#testdiv');
  observer.observe(target, {
    attributes: true
  });

});

<div id="testdiv" style="display:none;">hidden</div>
<button id="show">Show hidden div</button>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

vous pouvez utiliser jQuery LIVE Query plugin . Et écrire le code comme suit:

$('#contentDiv:visible').livequery(function() {
    alert("do something");
});

alors chaque fois que le contentDiv est visible, "faire quelque chose" sera alerté!

la solution de redsquare est la bonne réponse.

mais en tant que solution théorique vous pouvez écrire une fonction qui sélectionne les éléments Classés par .visibilityCheck ( pas tous les éléments visibles ) et vérifier leur valeur de propriété visibility ; si true alors faire quelque chose.

par la suite, la fonction doit être exécutée périodiquement en utilisant le setInterval() fonction. Vous pouvez arrêter le minuteur en utilisant le clearInterval() lors d'un appel réussi.

voici un exemple:

function foo() {
    $('.visibilityCheck').each(function() {
        if ($(this).is(':visible')){
            // do something
        }
    });
}

window.setInterval(foo, 100);

vous pouvez également effectuer quelques améliorations de performance sur elle, cependant, la solution est fondamentalement absurde à utiliser dans l'action. Si...

le code suivant (tiré de http://maximeparmentier.com/2012/11/06/bind-show-hide-events-with-jquery / ) vous permettra d'utiliser $('#someDiv').on('show', someFunc); .

(function ($) {
  $.each(['show', 'hide'], function (i, ev) {
    var el = $.fn[ev];
    $.fn[ev] = function () {
      this.trigger(ev);
      return el.apply(this, arguments);
    };
  });
})(jQuery);

Si vous voulez déclencher l'événement sur tous les éléments (et les éléments enfants) qui sont réellement visibles, par $.montrer, à bascule, toggleClass, addClass, ou removeClass:

$.each(["show", "toggle", "toggleClass", "addClass", "removeClass"], function(){
    var _oldFn = $.fn[this];
    $.fn[this] = function(){
        var hidden = this.find(":hidden").add(this.filter(":hidden"));
        var result = _oldFn.apply(this, arguments);
        hidden.filter(":visible").each(function(){
            $(this).triggerHandler("show"); //No bubbling
        });
        return result;
    }
});

et maintenant votre élément:

$("#myLazyUl").bind("show", function(){
    alert(this);
});

vous pouvez ajouter des overrides à des fonctions jQuery supplémentaires en les ajoutant au tableau en haut (comme "attr")

masquer/afficher l'événement déclencheur basé sur Glenns ideea: supprimé bascule parce qu'il allume show / hide et nous ne voulons pas 2 feux pour un événement

$(function(){
    $.each(["show","hide", "toggleClass", "addClass", "removeClass"], function(){
        var _oldFn = $.fn[this];
        $.fn[this] = function(){
            var hidden = this.find(":hidden").add(this.filter(":hidden"));
            var visible = this.find(":visible").add(this.filter(":visible"));
            var result = _oldFn.apply(this, arguments);
            hidden.filter(":visible").each(function(){
                $(this).triggerHandler("show");
            });
            visible.filter(":hidden").each(function(){
                $(this).triggerHandler("hide");
            });
            return result;
        }
    });
});

j'ai eu ce même problème et j'ai créé un plugin jQuery pour le résoudre pour notre site.

https://github.com/shaunbowe/jquery.visibilityChanged

Voici comment vous l'utiliseriez basé sur votre exemple:

$('#contentDiv').visibilityChanged(function(element, visible) {
    alert("do something");
});

utiliser jQuery Waypoints:

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

autres exemples sur le site de jQuery Waypoints .

vous pouvez également essayer jQuery appear plugin comme mentionné dans le fil parallèle https://stackoverflow.com/a/3535028/741782

ce support facilite et déclenche l'événement après l'animation fait! [testé sur jQuery 2.2.4]

(function ($) {
    $.each(['show', 'hide', 'fadeOut', 'fadeIn'], function (i, ev) {
        var el = $.fn[ev];
        $.fn[ev] = function () {
            var result = el.apply(this, arguments);
            var _self=this;
            result.promise().done(function () {
                _self.triggerHandler(ev, [result]);
                //console.log(_self);
            });
            return result;
        };
    });
})(jQuery);

inspiré de http://viralpatel.net/blogs/jquery-trigger-custom-event-show-hide-element /

il y a un plugin jQuery disponible pour regarder le changement dans les attributs de DOM,

https://github.com/darcyclarke/jQuery-Watch-Plugin

le plugin enveloppe tout ce que vous devez faire est de lier MutationObserver

vous pouvez alors l'utiliser pour regarder le div en utilisant:

$("#selector").watch('css', function() {
    console.log("Visibility: " + this.style.display == 'none'?'hidden':'shown'));
    //or any random events
});

ce qui m'a aidé ici est récent ResizeObserver spec polyfill :

const divEl = $('#section60');

const ro = new ResizeObserver(() => {
    if (divEl.is(':visible')) {
        console.log("it's visible now!");
    }
});
ro.observe(divEl[0]);

notez que c'est crossbrowser et performant (pas de sondage).

j'ai fait une simple fonction setinterval pour y parvenir. Si l'élément avec la classe div1 est visible, il définit div2 pour être visible. Je ne connais pas de bonne méthode, mais une solution simple.

setInterval(function(){
  if($('.div1').is(':visible')){
    $('.div2').show();
  }
  else {
    $('.div2').hide();
  }      
}, 100);

j'ai changé le déclencheur d'événement hide/show de Catalint basé sur L'idée de Glenns. Mon problème est que j'ai une application modulaire. Je change entre les modules montrant et cacher les divs parents. Puis quand je cache un module et en montre un autre, avec sa méthode j'ai un retard visible quand je change entre les modules. J'ai seulement besoin parfois d'éclairer cet événement, et dans certains enfants spéciaux. J'ai donc décidé de ne notifier que les childs avec la classe "displayObserver "

$.each(["show", "hide", "toggleClass", "addClass", "removeClass"], function () {
    var _oldFn = $.fn[this];
    $.fn[this] = function () {
        var hidden = this.find(".displayObserver:hidden").add(this.filter(":hidden"));
        var visible = this.find(".displayObserver:visible").add(this.filter(":visible"));
        var result = _oldFn.apply(this, arguments);
        hidden.filter(":visible").each(function () {
            $(this).triggerHandler("show");
        }); 
        visible.filter(":hidden").each(function () {
            $(this).triggerHandler("hide");
        });
        return result;
    }
});

Puis, quand un enfant veut écouter pour "montrer" ou "masquer" événement, j'ai ajouté la catégorie "displayObserver", et quand Il ne veut pas continuer à l'écouter, j'ai supprimer la classe

bindDisplayEvent: function () {
   $("#child1").addClass("displayObserver");
   $("#child1").off("show", this.onParentShow);
   $("#child1").on("show", this.onParentShow);
},

bindDisplayEvent: function () {
   $("#child1").removeClass("displayObserver");
   $("#child1").off("show", this.onParentShow);
},

je veux aider

Une façon de le faire.

Fonctionne seulement sur les changements de visibilité qui sont faits par changement de classe css, mais peut être étendu pour surveiller les changements d'attribut aussi.

var observer = new MutationObserver(function(mutations) {
        var clone = $(mutations[0].target).clone();
        clone.removeClass();
                for(var i = 0; i < mutations.length; i++){
                    clone.addClass(mutations[i].oldValue);
        }
        $(document.body).append(clone);
        var cloneVisibility = $(clone).is(":visible");
        $(clone).remove();
        if (cloneVisibility != $(mutations[0].target).is(":visible")){
            var visibilityChangedEvent = document.createEvent('Event');
            visibilityChangedEvent.initEvent('visibilityChanged', true, true);
            mutations[0].target.dispatchEvent(visibilityChangedEvent);
        }
});

var targets = $('.ui-collapsible-content');
$.each(targets, function(i,target){
        target.addEventListener('visibilityChanged',VisbilityChanedEventHandler});
        target.addEventListener('DOMNodeRemovedFromDocument',VisbilityChanedEventHandler });
        observer.observe(target, { attributes: true, attributeFilter : ['class'], childList: false, attributeOldValue: true });
    });

function VisbilityChanedEventHandler(e){console.log('Kaboom babe'); console.log(e.target); }

ma solution:

; (function ($) {
$.each([ "toggle", "show", "hide" ], function( i, name ) {
    var cssFn = $.fn[ name ];
    $.fn[ name ] = function( speed, easing, callback ) {
        if(speed == null || typeof speed === "boolean"){
            var ret=cssFn.apply( this, arguments )
            $.fn.triggerVisibleEvent.apply(this,arguments)
            return ret
        }else{
            var that=this
            var new_callback=function(){
                callback.call(this)
                $.fn.triggerVisibleEvent.apply(that,arguments)
            }
            var ret=this.animate( genFx( name, true ), speed, easing, new_callback )
            return ret
        }
    };
});

$.fn.triggerVisibleEvent=function(){
    this.each(function(){
        if($(this).is(':visible')){
            $(this).trigger('visible')
            $(this).find('[data-trigger-visible-event]').triggerVisibleEvent()
        }
    })
}
})(jQuery);

exemple d'usage:

if(!$info_center.is(':visible')){
    $info_center.attr('data-trigger-visible-event','true').one('visible',processMoreLessButton)
}else{
    processMoreLessButton()
}

function processMoreLessButton(){
//some logic
}

$( window ).scroll(function(e,i) {
    win_top = $( window ).scrollTop();
    win_bottom = $( window ).height() + win_top;
    //console.log( win_top,win_bottom );
    $('.onvisible').each(function()
    {
        t = $(this).offset().top;
        b = t + $(this).height();
        if( t > win_top && b < win_bottom )
            alert("do something");
    });
});

J'espère que cela fera le travail de la manière la plus simple:

$("#myID").on('show').trigger('displayShow');

$('#myID').off('displayShow').on('displayShow', function(e) {
    console.log('This event will be triggered when myID will be visible');
});

<div id="welcometo">Özhan</div>
<input type="button" name="ooo" 
       onclick="JavaScript:
                    if(document.all.welcometo.style.display=='none') {
                        document.all.welcometo.style.display='';
                    } else {
                        document.all.welcometo.style.display='none';
                    }">

CE code Auto control non requis query visible ou unvisible control