javascript - fadeToggle 与 text() 错误?

标签 javascript jquery

我正在尝试制作 fadeToggle对 jQuery 的影响, 切换效果仅在第二次单击 <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 元素在 beginningng 的默认状态是 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>

关于javascript - fadeToggle 与 text() 错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43299408/

相关文章:

javascript - Angular JS 提取 JSON 数据

javascript - 如何停止文本滚动?

jQuery 在多个级别上解析 JSON

javascript - js脚本仅显示来自mysql数据库的真实 bool 值

javascript - 如何使用 Jasmine 测试完成和失败的延迟对象

php - 如何在Jquery中隐藏/显示多个对象?

javascript - 这个正则表达式有什么问题 - 与不情愿的量词有关吗?

javascript - 变量定义中的多个相等

javascript - 获取图像可见区域状态以将 Canvas 中的图像设置在先前拖动的位置

javascript - Angular 尝试读取服务中的属性