我正在尝试对jQuery产生fadeToggle效果，
仅在第二次单击<h1>标记时，切换效果才能正常工作。
在第一个单击中，它会显示并立即隐藏。
注意，如果删除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>最佳答案
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>