attivare un evento quando l'utente si trova nella pagina

Question

Ho questo codice

$(document).ready(function(){ 
    var fade_in = function(){ 
     $(".quote").fadeIn(); 
    } 
    setTimeout(fade_in, 2000); 
    var fade_out = function() { 
     $(".quote").fadeOut(); 
    } 
    setTimeout(fade_out, 10000); 
}); 

Ciò che fa è che la "citazione" div svanisce lentamente, rimane per qualche secondo e poi svanisce. Quello che voglio è che tutto questo accada quando l'utente è sulla pagina, se non sei nella pagina, il testo si affievolisce, svanisce e ti manca. Come lo posso fare?

Answer 1

Ci sono due modi

Primo: (po 'vecchio)

$(document).ready(function() { 
 
    window.onfocus = function() { 
 
    var fade_in = function() { 
 
     $(".quote").fadeIn(); 
 
    } 
 
    setTimeout(fade_in, 2000); 
 
    var fade_out = function() { 
 
     $(".quote").fadeOut(); 
 
    } 
 
    setTimeout(fade_out, 10000); 
 
    }; 
 
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="quote">quote</div>

Secondo:

function getHiddenProp() { 
 
    var prefixes = ['webkit', 'moz', 'ms', 'o']; 
 

 
    // if 'hidden' is natively supported just return it 
 
    if ('hidden' in document) return 'hidden'; 
 

 
    // otherwise loop over all the known prefixes until we find one 
 
    for (var i = 0; i < prefixes.length; i++) { 
 
    if ((prefixes[i] + 'Hidden') in document) 
 
     return prefixes[i] + 'Hidden'; 
 
    } 
 

 
    // otherwise it's not supported 
 
    return null; 
 
} 
 

 
function isHidden() { 
 
    var prop = getHiddenProp(); 
 
    if (!prop) return false; 
 

 
    return document[prop]; 
 
} 
 

 
// use the property name to generate the prefixed event name 
 
var visProp = getHiddenProp(); 
 
if (visProp) { 
 
    var evtname = visProp.replace(/[H|h]idden/, '') + 'visibilitychange'; 
 
    document.addEventListener(evtname, visChange); 
 
} 
 

 
function visChange() { 
 
    var txtFld = document.getElementById('visChangeText'); 
 

 
    if (txtFld) { 
 
    if (!isHidden()) { 
 
     var fade_in = function() { 
 
     $(".quote").fadeIn(); 
 
     } 
 
     setTimeout(fade_in, 2000); 
 
     var fade_out = function() { 
 
     $(".quote").fadeOut(); 
 
     } 
 
     setTimeout(fade_out, 10000); 
 

 
    }; 
 
    } 
 
} 
 
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="quote">quote</div>

Answer 2

Questo eseguirà quando la pagina div visibile

$(document).ready(function(){ 
 
     $("div:visible").click(function() { 
 
    $(this).css("background", "yellow"); 
 
}); 
 
    });