Question

此代码有效吗？点击h2链接后，我需要在.hide课程中隐藏#idAnchor。

<script>
$(document).ready(function(){

$("#idAnchor").click(function(){
    $(".hide").animate({ opacity: "hide" }, "slow");
});

});
</script>

<h2 class="hide">New users:</h2>

....

<div style="float: right; margin-top: 20px; ">
    <a href="#" id="idAnchor">More users</a>
</div>

Answer 1

它不会像你期望的那样表现，因为这一行：

$(".hide").animate({ opacity: "hide" }, "slow");

尝试将opacity设置为"hide"。

opacity CSS property必须是0和1之间的数字。例如0如果您希望隐藏元素。

$(".hide").animate({ opacity: 0 }, "slow");

如果你真的想要从流程中取出元素，你可能想要触摸display属性，它有一个简写：

$(".hide").hide("slow");

Answer 2

在以下行中进行更改：

$(".hide").animate({ opacity: "hide" }, "slow");

更改不透明度值，如下所示：

$(".hide").animate({ opacity: '0.4' }, "slow");

之后它会起作用。

注意：不透明度的值总是在0到1之间。它可能是十进制的，如0.4,0.5 ......等等。

Answer 3

使用event.preventDefault()和opacity范围是0到1。

$("#idAnchor").click(function(event){
    event.preventDefault()
    $(".hide").animate({ opacity: 0 }, "slow");
}

Answer 4

为什么不

 $(".hide").fadeTo("slow", 0);

演示：https://jsfiddle.net/8zorc40d/

脚本会起作用吗？

4 个答案: