爲什麼添加速度切換影響'：可見'？

我對一些功能的工作，以顯示包含一些文本一個div當用戶點擊一個鏈接。爲什麼添加速度切換影響'：可見'？

鏈接最初顯示文本「節目+」，然後在DIV透露該文本更改爲「隱藏 - 」。代碼如下：

JQUERY

<script> 
    $(document).ready(function() { 
    $('p.link + div').hide(); 
    $('p.link a').prepend('<span>info +</span> '); 

    $('p.link a').click(function(e) { 
    var vis = $(this).parent().next().toggle().is(':visible'); 
    $(this).find('span').text(vis ? 'hide -' : 'info +'); 
    e.preventDefault(); 
    }); 
    }); 
    </script>

HTML

<p class="link"><a href="#" class="show-hide"> </a></p> 

    <div class="info"> 

    <p>Some sample text to show and hide</p> 

    </div> <!-- info -->

這是所有工作正常，但後來我決定而不是立即顯示/隱藏，這將是很好通過向切換添加速度逐漸顯示文本。因此，我修改了以下線路：

JQUERY

var vis = $(this).parent().next().toggle("slow").is(':visible');

這給我的過渡效果我想，但現在鏈接文本沒有改變。它仍然最初顯示爲「信息+」但是從那裏後，無論是否被顯示在div與否，鏈接文字寫着「隱藏 - 」。

我想這是因爲莫名其妙的代碼總是看到DIV，因爲即使當它不是，但我不確定如何解決這個問題的顯示。

任何幫助，將不勝感激。

感謝

來源

2012-11-21 Johnny

使用的toggle的回調參數的過渡完成之後，而不是試圖後立即執行它來執行你的發言。

var span = $(this).find('span'); 
$(this).parent().next().toggle("slow", function() { 
    span.text($(this).is(":visible") ? 'hide -' : 'info +'); 
});

JSFiddle

來源

2012-11-21 16:18:17 Brandon

謝謝，這工作完全。剛剛閱讀了回調，現在對我來說很有意義。 – Johnny

這是非常簡單的，爲什麼它的發生。如果你消失後，應進行檢查直，它是這樣的：褪色的元素意味着它不是隱藏的，這意味着它是可見的;淡出元素意味着它沒有隱藏，這意味着它是可見的。

你可以先保存狀態：

var elem = $(this).parent().next(); 
var vis = elem.is(':visible'); 
elem.toggle("slow");

或者存儲在一個類中的狀態（這將更好地工作，如果用戶是連續點擊）

var vis = $(this).parent().next().toggleClass("visible").toggle("slow").hasClass("visible");

來源

2012-11-21 16:20:06

爲什麼添加速度切換影響'：可見'？

回答

相關問題