jQuery подія, щоб запустити дію, коли div буде видно

Я використовую jQuery на своєму веб-сайті, і я хотів би ініціювати певні дії, коли певний div стане видимим.

Чи можна приєднати якийсь "невидимий" обробник подій до довільних div та мати певний код, коли вони стануть видимими?

Я хотів би щось на зразок наступного псевдокоду:

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

Код попередження ("зроби щось") не повинен спрацьовувати, поки contentDiv фактично не стане видимим.

Дякую.

Ви завжди можете додати до оригінального методу .show (), так що вам не доведеться запускати події щоразу, коли ви щось показуєте, або якщо це потрібно для роботи зі застарілим кодом:

Розширення Jquery:

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

Приклад використання:

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

Це ефективно дозволяє робити щось до початку та після показу, виконуючи нормальну поведінку оригінального методу .show ().

^{Ви також можете створити інший метод, щоб вам не довелося перекривати оригінальний метод .show ().}

Проблему вирішують спостерігачі мутації DOM . Вони дозволяють прив’язати спостерігача (функцію) до подій, що змінюються змістом, текстом або атрибутами елементів купола.

З випуском IE11 всі основні браузери підтримують цю функцію, перегляньте http://caniuse.com/mutationobserver

Приклад коду такий:

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

Немає рідної події, яку ви можете підключити для цього, однак ви можете викликати подію зі свого сценарію після того, як ви зробите видимий поділ за допомогою. тригерна функція

напр

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

Ви можете використовувати плагін jQuery Live Query . І написати код наступним чином:

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

Тоді кожного разу, коли видно вмістDiv, буде попереджено "зробіть щось"!

рішення червоного кольору - правильна відповідь.

Але як ІНТЕОРІЙНЕ рішення ви можете написати функцію, яка вибирає елементи, класифіковані за .visibilityCheck( не всі видимі елементи ), і перевіряти їх visibilityвластивість; якщо trueтоді щось робити.

Після цього функцію слід періодично виконувати за допомогою setInterval()функції. Ви можете зупинити таймер за допомогою clearInterval()успішного виклику.

Ось приклад:

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

window.setInterval(foo, 100);

Ви також можете виконати деякі покращення продуктивності, проте рішення в основному є абсурдним для використання в дії. Тому...

Наступний код (витягнутий з http://maximeparmentier.com/2012/11/06/bind-show-hide-events-with-jquery/ ) дозволить вам використовувати $('#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);

Якщо ви хочете запустити подію на всіх елементах (та дочірніх елементах), які фактично робляться видимими, за допомогою $ .show, toggle, toggleClass, addClass або 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;
    }
});

А тепер ваш елемент:

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

Ви можете додати зміни до додаткових функцій jQuery, додавши їх до масиву вгорі (наприклад, "attr")

тригер події приховати / показати на основі ідеї Glenns: видалений перемикач, оскільки він запускає show / hid, і ми не хочемо 2 пожежі для однієї події

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

У мене була ця сама проблема і я створив плагін jQuery, щоб вирішити його для нашого сайту.

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

Ось як би ви його використовували на основі прикладу:

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

Використовуйте шляхові точки jQuery:

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

Інші приклади на сайті jQuery Waypoints .

Що мені тут допомогло, - це нещодавня специфікація поліфункції ResizeObserver :

const divEl = $('#section60');

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

Зауважте, що він є перехресним і виконавчим (без опитування).

Я досяг простої заданої інтервальної функції, щоб досягти цього. Якщо видно елемент з класом div1, він встановлює видимість div2. Я знаю не хороший метод, а просте виправлення.

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

Ви також можете спробувати плагін jQuery, як згадується в паралельній потоці https://stackoverflow.com/a/3535028/741782

Ця підтримка полегшує та запускає подію після анімації! [тестовано на 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);

Натхненний http://viralpatel.net/blogs/jquery-trigger-custom-event-show-hide-element/

Просто зв’яжіть тригер із селектором і введіть код у подію тригера:

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

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

Для перегляду змін в атрибутах DOM доступний плагін jQuery,

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

Обгортання плагіну Все, що вам потрібно зробити, - це прив’язати MutationObserver

Потім ви можете використовувати його для перегляду діва за допомогою:

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

Сподіваюся, що це виконає цю роботу найпростішим чином:

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

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

Я змінив спусковий механізм приховування / показу на Catalint на основі ідеї Гленна. Моя проблема полягала в тому, що у мене є модульний додаток. Я змінююсь між модулями, які показують і ховають діви-батьків. Потім, коли я приховую модуль і показую інший, з його методом у мене помітна затримка, коли я змінююсь між модулями. Мені потрібно лише інколи запалити цю подію і в деяких особливих дітях. Тому я вирішив повідомити лише про дітей із класом "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;
    }
});

Тоді, коли дитина хоче слухати подію "показати" або "приховати", я повинен додати йому клас "displayObserver", і коли він не хоче продовжувати слухати його, я видаляю його клас

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

Бажаю допомоги

Один із способів зробити це.
Працює лише над змінами видимості, які вносяться зміною класу css, але їх можна також розширити, щоб також спостерігати за змінами атрибутів.

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

моє рішення:

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

Приклад використання:

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

Цей код автоматичного керування не вимагає видимого або невидимого керування запитом