Jquery 单击按钮即可隐藏/取消隐藏具有淡入淡出效果的文本框

我已经阅读了此参考资料


这导致了这个答案


但是，我想在隐藏/取消隐藏过程中添加淡入淡出效果
我该怎么做

您想要.fadeToggle（）函数：

使用函数

fadeToggle()

---

您可以使用以下jQuery：

<script type="text/javascript">
$().ready = function() {
    $('#text').hide();

    $("#driver").click(function() {
        $('#text').fadeToggle();
    });

}();
</script>

$（）.ready=function（）{
$（'#text'）.hide（）；
$（“#驱动程序”）。单击（函数（）{
$（'#text'）.fadeToggle（）；
});
}();

为了防止它在多次快速单击按钮后不断淡入淡出，请使用以下jQuery，它将阻止它这样做：

<script type="text/javascript">
$().ready = function() {
    $('#text').hide();

    $("#driver").click(function() {
        $('#text').stop(true,true).fadeToggle();
    });

}();
</script>

$（）.ready=function（）{
$（'#text'）.hide（）；
$（“#驱动程序”）。单击（函数（）{
$（'#text'）.stop（true，true.fadeToggle（）；
});
}();

正如其他人所说，fadeToggle（）。我在这把小提琴上加了一些额外的东西：

它不允许用户不断点击按钮来破坏动画。用户只能按一次，动画完成后，他可以再按一次

回答评论中的问题：

---

谢谢，不过人们还是可以再次单击它，对吗？但不是rapidly@skeith是的，人们肯定可以再次点击它。只是当你快速点击它时，它会把整个div搞乱。但是当他们不断点击时，.stop会使它停止，并使其可见，而不是来回闪烁。它基本上阻止它在一个元素的队列中生成一堆动画，这是在快速单击一行中的很多元素时引起的。您可以尝试取出

.stop（true，true）

一秒钟，然后快速点击它，看看会发生什么，这不好，但是

.stop（true，true）

修复了这一问题。：）谢谢，我会试试。--现在如果我想让它显示在按钮上，我的意思是按钮消失并变成文本框。然后，如果他们在区域外单击，文本框消失，按钮重新出现。我该怎么办that@skeith在我的回答中补充了这一点。如果你觉得这是你想要的，请接受它。