jQuery ginocchiera e IF visibile

Question

Ho un div che contiene le impostazioni e le opzioni su una pagina di gestione account.

$("#moreOptions").slideToggle('slow');
if ($("#moreOptions").is(":visible") == true) {
    $("#lnkMoreOpt").text("Less Options «")
}
else {
    $("#lnkMoreOpt").text("More Options »")
}

Il codice di cui sopra dovrebbe modificare il testo del / meno di collegamento più opzioni a seconda se è visibile o no, comunque sembra jQuery non tratta commutando come è invisibile / visibile.

Come posso implementare questa pur utilizzando la levetta funzioni?

Answer 1

È necessario utilizzare la funzione di callback. Con il tempo l'istruzione if viene valutata l'slideToggle non avrà completato e si ottengono risultati non corretti.

$("#moreOptions").slideToggle('slow', callbackFn);

function callbackFn(){

     var $link = $("#lnkMoreOpt");

     $(this).is(":visible") ? $link.text("Less Options «") : $link.text("More Options »");


}

Answer 2

Credo che questo codice funziona

$('#element').toggle('slow', function() {
    if($(this).is(':hidden')) { 
        $(this).text('This element is hidden.');
    }
    else {
        $(this).text('This element is visible.');
    }
}); 

Answer 3

Io preferisco non usare funzioni distinte, perché quando una funzione non ha bisogno di essere usato due volte, è spreco di codice .. Credo che questo sia più facile da capire quando qualcuno viene ad esso ..

$("#moreOptions").slideToggle('slow', function(){
     var $link = $("#lnkMoreOpt");
     $(this).is(":visible") ? $link.text("Less Options «") : $link.text("More Options »");
});