JQuery, когда элемент становится видимым

В принципе, мне интересно, есть ли способ автоматически запускать функцию, когда элемент становится скрытым или видимым, а не щелчком пользователя, но автоматически в другом script.

Я не хочу, чтобы это просто запускалось один раз, потому что элементы (такие как ползунок) постоянно меняются от видимого к скрытому.

Будет ли это что-то, что jQuery может сделать со связью? Например, привязка видимости элемента к функции (я не знаю, как это записать)

Если вам нужно, чтобы я подробно рассказал о том, что я пытаюсь сделать, дайте мне знать. Благодаря

Псевдокод:

$('#element').bind('display:none', function);
function(){
    //do something when element is display:none
}

$('#element').bind('display:block', function2);
function2(){
    //do opposite of function
}

Ответы

Ответ 1

~~В JQuery нет событий для обнаружения изменений css.~~
~~Смотрите здесь: событие типа onHide() в jQuery~~
Это возможно:

Модуль DOM L2 Events определяет события мутации; один из них - DOMAttrModified - это тот, который вам нужен. Конечно, они не получили широкого распространения, но поддерживаются по крайней мере в браузерах Gecko и Opera.
Источник: обнаружение события при изменении свойства css с использованием Jquery.

Без событий вы можете использовать функцию setInterval, например:

var maxTime = 5000, // 5 seconds
    startTime = Date.now();

var interval = setInterval(function () {
        if ($('#element').is(':visible')) {
            // visible, do something
            clearInterval(interval);
        } else {
            // still hidden
            if (Date.now() - startTime > maxTime) {
                // hidden even after 'maxTime'. stop checking.
                clearInterval(interval);
            }
        }
    },
    100 // 0.1 second (wait time between checks)
);

Обратите внимание, что использование setInterval таким образом для контроля может повлиять на производительность вашей страницы.

7 июля 2018 года:
Поскольку этот ответ в последнее время получает некоторую известность и количество голосов, вот дополнительное обновление по обнаружению изменений CSS:

Mutation Events теперь были заменены более дружественным Mutation Observer.

Интерфейс MutationObserver позволяет отслеживать изменения, вносимые в дерево DOM. Он разработан как замена более старой функции Mutation Events, которая была частью спецификации DOM3 Events.

См. Https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver.

Ответ 2

(function() {
    var ev = new $.Event('display'),
        orig = $.fn.css;
    $.fn.css = function() {
        orig.apply(this, arguments);
        $(this).trigger(ev);
    }
})();

$('#element').bind('display', function(e) {
    alert("display has changed to :" + $(this).attr('style') );
});

$('#element').css("display", "none")// i change the style in this line !!
$('#element').css("display", "block")// i change the style in this line !!

http://fiddle.jshell.net/prollygeek/gM8J2/3/

будут предупреждены изменения.

Ответ 3

Пробовал это на firefox, работает http://jsfiddle.net/Tm26Q/1/

$(function(){
 /** Just to mimic a blinking box on the page**/
  setInterval(function(){$("div#box").hide();},2001);
  setInterval(function(){$("div#box").show();},1000);
 /**/
});

$("div#box").on("DOMAttrModified",
function(){if($(this).is(":visible"))console.log("visible");});

UPDATE

В настоящее время события мутации (например, DOMAttrModified, используемые в решение) заменяются на MutationObserver, вы можете использовать это для обнаруживает изменения DOM node, как в приведенном выше случае.

Ответ 4

Я только что улучшил ProllyGeek ответ

Кто-то может сочтет это полезным. вы можете получить доступ к событию displayChanged(event, state), когда .show(), .hide() или .toggle() вызывается в элементе

(function() {
  var eventDisplay = new $.Event('displayChanged'),
    origShow = $.fn.show,
    origHide = $.fn.hide;
  //
  $.fn.show = function() {
    origShow.apply(this, arguments);
    $(this).trigger(eventDisplay,['show']);
  };
  //
  $.fn.hide = function() {
    origHide.apply(this, arguments);
    $(this).trigger(eventDisplay,['hide']);
  };
  //
})();

$('#header').on('displayChanged', function(e,state) {
      console.log(state);
});

$('#header').toggle(); // .show() .hide() supported

Ответ 5

Мне нравится плагин https://github.com/hazzik/livequery Он работает без таймеров!

Простое использование

$('.some:visible').livequery( function(){ ... } );

Но вам нужно исправить ошибку. Заменить строку

$jQlq.registerPlugin('append', 'prepend', 'after', 'before', 'wrap', 'attr', 'removeAttr', 'addClass', 'removeClass', 'toggleClass', 'empty', 'remove', 'html', 'prop', 'removeProp');

$jQlq.registerPlugin('show', 'append', 'prepend', 'after', 'before', 'wrap', 'attr', 'removeAttr', 'addClass', 'removeClass', 'toggleClass', 'empty', 'remove', 'html', 'prop', 'removeProp');

Ответ 6

Всеобъемлющее пользовательское событие jQuery, основанное на расширении его основных методов, как это было предложено разными людьми в этой теме:

(function() {
    var ev = new $.Event('event.css.jquery'),
        css = $.fn.css,
        show = $.fn.show,
        hide = $.fn.hide;

    // extends css()
    $.fn.css = function() {
        css.apply(this, arguments);
        $(this).trigger(ev);
    };

    // extends show()
    $.fn.show = function() {
        show.apply(this, arguments);
        $(this).trigger(ev);
    };

    // extends hide()
    $.fn.hide = function() {
        hide.apply(this, arguments);
        $(this).trigger(ev);
    };
})();

Затем внешняя библиотека использует sth like $('selector').css('property', value).

Поскольку мы не хотим изменять код библиотеки, но мы ДОЛЖНЫ расширять его поведение, мы делаем следующее:

$('#element').on('event.css.jquery', function(e) {
    // ...more code here...
});

Пример: пользователь нажимает на панель, созданную библиотекой. Библиотека показывает/скрывает элементы на основе взаимодействия с пользователем. Мы хотим добавить датчик, который показывает, что sth был скрыт/показан из-за этого взаимодействия и должен вызываться после библиотечной функции.

Другой пример: jsfiddle.

Ответ 7

Проверьте эту ссылку ! Вот расширение Jquery для событий afterShow и beforeShow.