使用show/hide来缓慢淡入/淡出一个段落。

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(){
    });
});

但是这段代码由于某些原因无法运行。如果您知道原因，请告诉我！

- Fabian

Answer 1

首先，你需要移除 $(".hideA p") 并使用 $("p")，否则你会隐藏按钮！

另外，你可以通过给段落添加id来指定它：

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

那么尝试以下代码来运行它：

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

- DirWolf

---

不需要回调函数function(){}，请将其删除，$("#paragraph").show("slow", function(){ }); 可以改为 $("#paragraph").show("slow");。 - Pranay Rana

没问题，不需要了。我已经在测试警报上测试过了！$("#paragraph").show("slow");一定会起作用的！@Pranay - DirWolf

Answer 2

对于下面两种方法都需要设置p元素的id。

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

---

你也可以尝试使用animate函数，这将提供隐藏的填充效果，最后通过可见性属性隐藏。

   $(".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/

- Pranay Rana

---

你不能使用 $(".hideA p") 来定位段落。 - DirWolf

@DirWolf - 已更新答案...我只关注问题文本...用动画隐藏元素... - Pranay Rana

@Fabian - 设置 p 的 id，现在尝试一下，我也更新了。 - Pranay Rana

是的，那个现在可以用了！但我已经使用了上面的代码，它完成了任务。非常感谢你们的努力！非常感激。 - Fabian