Question

我试图在按下按钮时显示/隐藏段落。但也看起来像上下慢动作。

HTML的外观如下：

<button class="hideA">Hide</button>
<button class="showA">show</button>
<p id>Helloooooooooooooooooooooo.</p>

这就是Jquery代码的样子：

$(".hideA").click(function(){
    $(".hideA p").hide(function(){
    });
});
$(".showA").click(function(){
    $(".hideA p").show(function(){
    });
});

但是这段代码由于某种原因没有运行。如果可以，请告诉我原因！

Answer 1

首先，您需要删除$（“。hideA p”）并使用$（“p”），否则您将隐藏Button！

此外，您可以通过向其添加ID来指定段落：

<p id="paragraph">Helloooooooooooooooooooooo.</p>

然后尝试使用以下代码运行它：

$(document).ready(function(){
    $(".hideA").click(function(){
        $("#paragraph").hide("slow");
    });
    $(".showA").click(function(){
        $("#paragraph").show("slow");
    });
});

Answer 2

对于以下两种工作方式，您需要设置p元素的ID

<button class="hideA">Hide</button>
<button class="showA">show</button>
<p id="para">Helloooooooooooooooooooooo.</p>

你可以尝试这种方式，通过使用动画功能，这将填充隐藏，最后它被visiblity属性隐藏。

   $(".hideA").click(function(){
    $( "#para" )
      .css({opacity: 1, visibility: "hidden"})
      .animate({opacity: 0}, 1000);
    });


    $(".showA").click(function(){
     $( "#para" )
     .css({opacity: 0, visibility: "visible"})
     .animate({opacity: 1}, 1000); 
    });

使用slideUp和slideDown方法。此方法提供隐藏和显示元素的动画，但您的元素保留在DOM

中

$(".hideA").click(function(){
    $("#para").slideUp(function(){
    });
});
$(".showA").click(function(){
    $("#para").slideDown(function(){
    });
});

工作演示：https://jsfiddle.net/pranayamr/xttk3r6o/

尝试使用show / hide慢慢淡入/淡出一个段落

2 个答案: