更改文本，如果股利是可見

Question

的#more以下jsFiddle改變文本取決於#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()這樣的if語句上面的工作（見本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時，slideToggle未完成，因此元素可見。

你應該把if語句中的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

這樣你就不必檢查元素的實際可見性。動畫完成後，您可以使用回調來執行代碼，但這可能會導致不必要的延遲。