jQuery alternar y SI visible

Question

Tengo un div que contiene configuraciones y opciones en una página de administración de cuenta.

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

El código anterior debe cambiar el texto del enlace de menos más/opciones en función de si es visible o no, sin embargo, parece jQuery no trata a alternar la vez que es invisible/visible.

¿Cómo puedo implementar esto mientras sigo usando la función de alternar?

Answer 1

Debe utilizar la función de devolución de llamada. En el momento en que se evalúa la declaración if, slideToggle no se habrá completado y obtendrá resultados incorrectos.

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

function callbackFn(){ 

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

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


} 

Answer 2

prefiero no utilizar funciones separadas porque cuando una función no necesita ser utilizado dos veces, se trata de residuos de código .. creo que esto es más fácil de entender cuando alguien viene a ella ..

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

Answer 3

creo que este código funcionará

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