jQuery: Comment lier un événement à la div lorsqu'il devient visible?

J'ai un élément div:
<div id="tab1">
Tab data
</div>.

Comment lier un événement personnalisé lors de cette div devient visible (obtient display: block;)?

Et je tiens aussi à lier un événement lors de cette div devient invisible (obtient display: none;).

J'aimerais le faire en jQuery.

Edit:
Je suis en train de faire simple onglets avec le contenu ajax. Je veux que le contenu de ce onglets en ajax-mis à jour uniquement lorsque l'onglet est visible.

Pouvez-vous donner un peu plus de contexte à ce que vous faites?
Alors que l'un des commentateurs ci-dessous a donné une solution viable, j'imagine que ce serait plus intelligent de se lier sur des événements personnalisés pour quand les onglets sont commutés. Il est beaucoup plus intelligente que la surveillance de la page contenu de la visibilité.
Merci de partager une partie de votre code Ajax.

OriginalL'auteur SaltLake | 2010-10-04

  1. 3

    De démarrer et d'arrêter l'AJAX mise à jour en fonction de la visibilité. Vous pouvez utiliser .est() pour retourner une valeur TRUE ou FALSE pour :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);
}

    Voici un exemple simple d'une horloge qui s'arrête quand il est invisible. Notez que les numéros ne pas continuer à augmenter quand ils ne sont pas visibles:

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

    Bien sûr, dans le cas ci-dessus, et peut-être votre cas, c'est plus simple à simple à tour de tourner la mise sous et hors tension:

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

    Cette jsFiddle service a soufflé mon esprit! C'est génial. Merci.
    Ma question n'était pas sur la façon de démarrer/arrêter l'envoi des requêtes ajax, mais sur la façon de lier un événement à div lorsqu'il devient visible (lorsque l'onglet est actif).
    Ouais. jsFiddle est assez utile et amusant!

    OriginalL'auteur Peter Ajtai

  2. 3

    Que l'événement toujours lié à la div, mais à l'intérieur de l'événement, de faire quelque chose comme ce qui suit:

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

    Maintenant votre événement ne sera déclenchée que si l'élément est visible à l'utilisateur.

    OriginalL'auteur Mike Trpcic

  3. 1

    La solution que j'ai trouvé a été de tirer jusqu'à focus cas lorsque l'onglet est sélectionné.

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

$('div.onglets ul.tabNavigation un").cliquez sur(function () { 
tabContainers.each(function(){ 

tabContainers.hide().filtre(ce.de hachage).show(); 

if ( $(this).is(':visible") ) { 
$(this).focus(); //le feu de cet événement si l'onglet est visible 
} else { 
$(this).blur(); //si l'onglet est invisible 
} 
}); 
});

    Et puis j'ai attraper ces focus et blur événements:

    $(document).ready(function(){ 
$("#tabID").bind("focus",function(){ 
if ( $(this).is(":visible") ) { 
//début de l'ajax ici 
} 
}); 

$("#onglet'.$clé.'").bind("flou",function(){ 
if ( !$(ce).is(":visible") ) { 
//arrêt de l'ajax ici 
} 
}); 
});

    OriginalL'auteur SaltLake