Изменить текст, если ДИВ видна

Question

Следующая jsFiddle изменения текста #more в зависимости от видимости #extra:

<style> 
#extra{ 
    display: none; 
} 
</style> 

<a href="#" id="more">More about us</a> 
<div id="extra">Some Text</div> 

<script> 
$('#more').click(function() {   
    if ($('#extra').is(':visible')) { 
     $(this).text('Less about us'); 
    } else { 
     $(this).text('More about us'); 
    } 

    $('#extra').slideToggle('fast'); 
}); 
</script> 

Это прекрасно работает. Однако, это больше не работает, если я ставлю slideToggle() выше, если-заявление, как это (см это jsFiddle):

$('#more').click(function() { 
    $('#extra').slideToggle('fast'); 

    if ($('#extra').is(':visible')) { 
     $(this).text('More about us');   
    } else {   
     $(this).text('Less about us'); 
    } 
}); 

В этом примере текст будет оставаться «Подробнее о нас» не имеет значения, если #extra является скрытый или нет. Зачем?

Answer 1

код get выполняется по одной строке за раз, поэтому к тому моменту, когда вы входите в if, слайдToggle не закончен, чтобы элемент был виден.

Вы должны поставить, если заявление в полном обратном вызове slideToggle в http://api.jquery.com/slidetoggle/

$('#more').click(function() { 
    var _this = this; 
    $('#extra').slideToggle('fast', function() { 
    if($(this).is(':visible')) { 
     $(_this).text('Less about us'); 
    } 
    else { 
     $(_this).text('More about us'); 
    } 
    }); 
}); 

jsFiddle

Answer 2

Это происходит потому, что анимация не будет сделана, прежде чем проверить видимость. Очиститель решение будет таким:

var visible = false; 
$('#more').click(function() { 
    visible = !visible; 

    if (visible) $('#extra').slideDown(); 
    else $('#extra').slideUp(); 

    $(this).text(visible ? 'Less about us' : 'More about us'); 
}); 

Fiddle

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