與文本（）錯誤fadeToggle？

我試圖對jQuery產生fadeToggle效果，只有在第二次點擊<h1>標記時，切換效果才能正常工作。在第一次點擊它後顯示並隱藏。與文本（）錯誤fadeToggle？

注意到，如果我刪除text("how are you")方法並將段落標記放在裏面，它將完美工作。

想知道爲什麼它不工作的第一種方式。這是我的HTML代碼：

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Title</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 

 
    <script> 
 

 
     $(document).ready(function(){ 
 
      $('h1').click(function(){ 
 
       $('p').text("how are you").fadeToggle(500); 
 
      }); 
 
     }); 
 
    </script> 
 
</head> 
 
<body> 
 

 
<h1>Hello jquery</h1> 
 

 
<p></p> 
 

 
</body> 
 
</html>

來源

2017-04-08 zb22

fadeToggle的工作方式相同例如toggle（適用對立屬性）。並且由於開始時p元素的默認狀態爲display: inline（可見），因此下一個默認操作將隱藏它。這就是爲什麼你必須首先將其定義爲隱藏。

$(document).ready(function() { 
 
    $('h1').click(function() { 
 
    $('.x').text("how are you").fadeToggle(500); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Hello jquery</h1> 
 
<p class='x' hidden></p>

來源

2017-04-08 19:25:39

它正常工作實際 - 段落元素被顯示，並通過點擊標題，該功能在其插入文本，然後切換褪色。當顯示元素時，默認情況下（因爲沒有附加規則會隱藏它），fadeToggle會從顯示狀態轉換到隱藏狀態。

正如上面的評論所述，爲了使fadeToggle從一個元素開始淡入，你應該首先隱藏元素（通過CSS或通過JS，根據你的需要）。

來源

2017-04-08 19:29:09

您的JS在初始化fadeToggle之前動態地在段落元素中插入文本。所以段落可見，但沒有文字，沒有背景和（因爲它沒有內容）沒有高度。這就是爲什麼肉眼看不見肉眼看不見的原因。如果你增加身高例如。 100px和背景例如。紅色通過CSS，你將能夠看到該元素。所以你有一個看似「隱形」的段落（對肉眼來說），在插入內容後（肉眼看不見），可以看到它（同時也給它高度）。但是，就瀏覽器而言，它總是可見的。 –

由於fadeToggle確定可見性（如瀏覽器認爲該元素是否可見），因此它會看到該元素是可見的，因此在第一次單擊時會將其淡出。在淡出之前你看到文本突然出現的唯一原因正是因爲你通過JS插入它。 –

與文本（）錯誤fadeToggle？

回答

相關問題