Question

我试图对jQuery产生fadeToggle效果，切换效果仅在第二次点击<h1>标记时才能正常工作。在第一次点击它出现并立即隐藏。

注意到，如果我删除了text("how are you")方法并将其放在了段落标记内，那么它就可以完成。

想知道为什么它不能以第一种方式工作。这是我的HTML代码：

＆＃13;

<!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>

＆＃13;

Answer 1

toggle的工作方式与例如p（适用于反对属性）。由于begininng中display: inline元素的默认状态为$(document).ready(function() { $('h1').click(function() { $('.x').text("how are you").fadeToggle(500); }); });（可见），因此下一个默认操作将隐藏它。这就是为什么你最初必须将其定义为隐藏的原因。

＆＃13;

<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>

＆＃13;

date1 = '2016-12-1'
time1 = '10:30 AM'
time2 = '11:30 PM'

＆＃13;

Answer 2

它实际上正常工作 - 显示了段落元素，通过单击标题，函数在其中插入文本然后切换淡入淡出。默认情况下，由于元素显示（因为没有附加规则，否则会隐藏它），fadeToggle将从显示状态转换为隐藏状态。

如上面的评论中所述，要通过淡化元素来使fadeToggle开始，您应该首先隐藏元素（通过CSS或通过JS，取决于您的需要）。

fadeToggle with text（）bug？

2 个答案: