与文本（）错误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？

回答

相关问题