jQuery-Ereignis zum Auslösen einer Aktion, wenn ein div sichtbar gemacht wird

Ich verwende jQuery auf meiner Site und möchte bestimmte Aktionen auslösen, wenn ein bestimmtes Div sichtbar gemacht wird.

Ist es möglich, eine Art "sichtbarer" Ereignishandler an beliebige Divs anzuhängen und bestimmten Code auszuführen, wenn der Div sichtbar gemacht wird?

Ich möchte so etwas wie den folgenden Pseudocode:

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

Der Alarmcode ("etwas tun") sollte erst ausgelöst werden, wenn contentDiv tatsächlich sichtbar gemacht wird.

Vielen Dank.

Sie können die ursprüngliche .show () -Methode jederzeit ergänzen, damit Sie nicht jedes Mal Ereignisse auslösen müssen, wenn Sie etwas anzeigen oder wenn Sie es für die Arbeit mit Legacy-Code benötigen:

Jquery-Erweiterung:

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

      // you can trigger a before show if you want
      obj.trigger('beforeShow');

      // now use the old function to show the element passing the new callback
      _oldShow.apply(obj, [speed, newCallback]);
    });
  }
});

Anwendungsbeispiel:

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

Auf diese Weise können Sie effektiv etwas vor und nach der Show ausführen, während Sie das normale Verhalten der ursprünglichen .show () -Methode ausführen.

^{Sie können auch eine andere Methode erstellen, damit Sie die ursprüngliche .show () -Methode nicht überschreiben müssen.}

Das Problem wird von Beobachtern der DOM-Mutation angesprochen . Mit ihnen können Sie einen Beobachter (eine Funktion) an Ereignisse binden, bei denen sich Inhalt, Text oder Attribute von dom-Elementen ändern.

Mit der Veröffentlichung von IE11 unterstützen alle gängigen Browser diese Funktion. Überprüfen Sie http://caniuse.com/mutationobserver

Der Beispielcode lautet wie folgt:

$(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>

Es gibt kein natives Ereignis, in das Sie sich einbinden können. Sie können jedoch ein Ereignis aus Ihrem Skript auslösen, nachdem Sie das div mithilfe von sichtbar gemacht haben. Trigger - Funktion

z.B

//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');
});

Sie können das Live Query-Plugin von jQuery verwenden . Und schreiben Sie den Code wie folgt:

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

Jedes Mal, wenn contentDiv sichtbar ist, wird "etwas tun" benachrichtigt!

Die Lösung von redsquare ist die richtige Antwort.

Als IN-THEORY-Lösung können Sie jedoch eine Funktion schreiben, die die nach .visibilityCheck( nicht alle sichtbaren Elemente ) klassifizierten Elemente auswählt und deren visibilityEigenschaftswert überprüft . wenn truedann etwas tun.

Danach sollte die Funktion regelmäßig mit der setInterval()Funktion ausgeführt werden. Sie können den Timer mit der Taste stoppenclearInterval() nach erfolgreichem Abruf .

Hier ist ein Beispiel:

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

window.setInterval(foo, 100);

Sie können auch einige Leistungsverbesserungen vornehmen. Die Lösung ist jedoch im Grunde genommen absurd, um in Aktion verwendet zu werden. So...

Der folgende Code (abgerufen von http://maximeparmentier.com/2012/11/06/bind-show-hide-events-with-jquery/ ) ermöglicht Ihnen die Verwendung $('#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);

Wenn Sie das Ereignis für alle Elemente (und untergeordneten Elemente) auslösen möchten, die tatsächlich sichtbar gemacht werden, durch $ .show, toggle, toggleClass, addClass oder 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;
    }
});

Und jetzt dein Element:

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

Sie können zusätzlichen jQuery-Funktionen Überschreibungen hinzufügen, indem Sie sie dem Array oben hinzufügen (z. B. "attr").

Ein Auslöser für das Ausblenden / Zeigen von Ereignissen, der auf Glenns Idee basiert: Das Umschalten wurde entfernt, da es das Ausblenden / Ausblenden auslöst und wir keine 2 Feuer für ein Ereignis wollen

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

Ich hatte das gleiche Problem und habe ein jQuery-Plugin erstellt, um es für unsere Site zu lösen.

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

So würden Sie es anhand Ihres Beispiels verwenden:

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

Verwenden Sie jQuery-Wegpunkte:

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

Weitere Beispiele auf der Website von jQuery Waypoints .

Was mir hier geholfen hat, ist die aktuelle Polyfill mit ResizeObserver-Spezifikation :

const divEl = $('#section60');

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

Beachten Sie, dass es Crossbrowser und Performant ist (kein Polling).

Ich habe eine einfache Setintervall-Funktion ausgeführt, um dies zu erreichen. Wenn ein Element mit der Klasse div1 sichtbar ist, wird div2 als sichtbar festgelegt. Ich kenne keine gute Methode, aber eine einfache Lösung.

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

Sie können auch versuchen, das jQuery-Plugin wie im parallelen Thread https://stackoverflow.com/a/3535028/741782 erwähnt anzuzeigen

Diese Unterstützung erleichtert und löst ein Ereignis aus, nachdem die Animation abgeschlossen ist! [getestet auf 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);

Inspiriert von http://viralpatel.net/blogs/jquery-trigger-custom-event-show-hide-element/

Binden Sie einfach einen Trigger mit dem Selektor und fügen Sie den Code in das Triggerereignis ein:

jQuery(function() {
  jQuery("#contentDiv:hidden").show().trigger('show');

  jQuery('#contentDiv').on('show', function() {
    console.log('#contentDiv is now visible');
    // your code here
  });
});

Es gibt ein jQuery-Plugin, mit dem Sie Änderungen an DOM-Attributen beobachten können.

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

Das Plugin wird verpackt. Sie müssen lediglich MutationObserver binden

Sie können es dann verwenden, um das div zu beobachten, indem Sie:

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

Hoffe, dies wird die Arbeit auf einfachste Weise erledigen:

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

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

Ich habe den Auslöser für das Ausblenden / Anzeigen von Ereignissen in Catalint basierend auf Glenns Idee geändert. Mein Problem war, dass ich eine modulare Anwendung habe. Ich wechsle zwischen Modulen, die Divs-Eltern ein- und ausblenden. Wenn ich dann ein Modul verstecke und ein anderes zeige, habe ich mit seiner Methode eine sichtbare Verzögerung, wenn ich zwischen Modulen wechsle. Ich brauche dieses Ereignis nur manchmal zu beleuchten, und bei einigen besonderen Kindern. Deshalb habe ich beschlossen, nur die Kinder mit der Klasse "displayObserver" zu benachrichtigen.

$.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;
    }
});

Wenn ein Kind dann auf das Ereignis "Zeigen" oder "Verstecken" hören möchte, muss ich ihm die Klasse "displayObserver" hinzufügen, und wenn es nicht weiter hören möchte, entferne ich ihm die Klasse

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

Ich wünsche Hilfe

Ein Weg, dies zu tun.
Funktioniert nur bei Sichtbarkeitsänderungen, die durch CSS-Klassenänderungen vorgenommen werden, kann jedoch erweitert werden, um auch auf Attributänderungen zu achten.

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

meine Lösung:

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

Anwendungsbeispiel:

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

<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';
                    }">

Diese automatische Code-Steuerung erfordert keine sichtbare oder nicht sichtbare Abfrage