jQuery: Как связать событие для div, когда оно становится видимым?

Question

У меня есть элемент div: <div id="tab1"> Tab data </div>.

Как связать пользовательское событие, когда этот div становится видимым (получает display: block;)?

А также я бынравится связывать событие, когда этот div становится невидимым (получает display: none;).

Я бы хотел сделать это в jQuery.

Редактировать: я делаю простые вкладки с содержанием ajax.Я хочу, чтобы содержимое этих вкладок обновлялось ajax только тогда, когда вкладка видна.

Answer 1

Запустите и остановите обновление AJAX в зависимости от видимости. Вы можете использовать .is(), чтобы вернуть ИСТИНА или ЛОЖЬ для :visible:

var timer; // Variable to start and top updating timer

  // This if statement has to be part of the event handler for the visibility
  //   change of selector..... so there might be more straight forward solution
  //   see the last example in this answer.
if ($(selector).is(":visible"))
{
    // Start / continue AJAX updating
    timer = setInterval(AJAXupdate, 1000);
} else
{
    // Stop AJAX updating
    clearInterval(timer);
}

Вот простой пример таймера, который останавливается, когда он невидим. Обратите внимание, что цифры не продолжают увеличиваться, когда они не видны:

(function() {    

    var switcher;                             // variable to start and stop timer

      // Function / event that will be started and stopped
    function count() {
        $("div").html(1 + parseInt($("div").html(), 10));
    }

    $(function() {                                               // <== doc ready

          // Start timer - it is visible by default
        switcher = setInterval(count, 1000);

        $("input").click(function() {

            $("div").toggle();                         // Toggle timer visibility

              // Start and stop timer based on visibility
            if ($("div").is(":visible"))
            {
                switcher = setInterval(count, 1000);
            } else
            {
                clearInterval(switcher);            
            }
        });
    });
}());
​

Пример jsFiddle

---

Конечно, в приведенном выше случае, и, возможно, в вашем случае, проще просто поочередно включать и выключать обновление:

(function() {    

    var switcher;

    function count() {
        $("div").html(1 + parseInt($("div").html(), 10));
    }

    $(function() {

        switcher = setInterval(count, 1000);

        $("input").toggle(function() { 
            clearInterval(switcher);
            $("div").toggle(); }, 
        function() {                        
            switcher = setInterval(count, 1000);
            $("div").toggle();
        });

    });

}());

jsFiddle пример

Answer 2

Пусть событие всегда привязано к div, но внутри события сделайте что-то вроде следующего:

if($(self).is(":visible")){
    // Implement your code
}

Теперь ваше событие будет срабатывать только в том случае, если элемент виден пользователю.

Answer 3

Решение, которое я нашел, состояло в том, чтобы вызвать событие focus, когда вкладка выбрана.

var tabContainers = $('div.tabs > div');

$('div.tabs ul.tabNavigation a').click(function () {
    tabContainers.each(function(){

        tabContainers.hide().filter(this.hash).show();

        if ( $(this).is(':visible') ) {
            $(this).focus(); <i>// fire this event if tab is visible</i>
        } else {
            $(this).blur(); <i>// if tab is invisible</i>
        }
    });
});

А потом я ловлю эти focus и blur события:

$(document).ready(function(){
    $("#tabID").bind("focus",function(){
        if ( $(this).is(":visible") ) {
            // start ajax here
        }
    });

    $("#tab'.$key.'").bind("blur",function(){
        if ( !$(this).is(":visible") ) {
            // stop ajax here
        }
    });
});