Наблюдение за изменениями отображения в jQuery

Можно ли добавить наблюдателя в элемент DOM, который запускается при изменении видимости (т.е. вызовы show() и hide())? Спасибо!

Ответ 1

Если вы хотите наблюдать любой вызов .show() или .hide() и иметь доступ к jQuery 1.5+, вы можете использовать jQuery.sub() для создания копии объекта jQuery для переопределения действий по умолчанию .show() или .hide().

var myjQuery = jQuery.sub();
myjQuery.fn.hide = function() {
    alert('hide');

    return jQuery.fn.hide.apply(this, arguments);
};
myjQuery.fn.show = function() {
    alert('show');
    return jQuery.fn.show.apply(this, arguments);
};

И затем с помощью .sub() copy

(function($) {
    $(document).ready(function() {
        $(".click").click(function() {
            if ($("#hide").is(":visible")) {
                $("#hide").hide();
            }
            else {
                $("#hide").show();
            }
        });
    });
})(myjQuery);

Пример jsfiddle

Ответ 2

Это невозможно из коробки, о которой я знаю, но если изменения происходят через jquery, вы можете легко добавить отслеживание самостоятельно, используя настраиваемое событие, подобное этому:

// save the jquery.show() method
$.prototype.base_show = $.prototype.show;
// provide your own that trigger the event then call the original one
$.prototype.show = function(speed, easing, callback) {
    // call your custom event, add any parameters you need there
    $(window).trigger('on_jquery_show'/*, params you need*/);
    // now call the "real" show method
    $.prototype.base_show(speed, easing, callback);
    // return this so you can chain it
    return this;
};
// add some callback to that custom event
$(window).bind('on_jquery_show', function() { console.log('show !'); });
// it works !
$('#some_div').show().show();

То же самое для hide().

Ответ 3

Да, вы можете:

Например:

 $('#divID').show('slow', function() {
    // Animation complete.
 });

Смотрите docs

Ответ 4

Предполагая, что вы показываете и скрываете использование механизмов jQuery, вы можете попробовать использовать плагин Live Query.

Live Query также имеет возможность запускать функцию (обратный вызов), когда она соответствует новому элементу, а другой функция (обратный вызов), когда элемент больше не сопоставляется.