Question

.fadeOut（）方法可对匹配元素的不透明度进行动画处理。不透明度达到0后，显示样式属性将设置为none，因此该元素不再影响页面的布局。

如果上面的说法是正确的，那我为什么要面对使该段退回的问题？

$("button").click(function() {
  if ($("#paragraph").css("display") == "none") {
    $("#paragraph").css("display") = "block";
    $("#paragraph").css("opacity") = 1;

  } else {
    $("#paragraph").fadeOut();
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="paragraph">This is a paragraph</p>
<button>Click me</button>

Answer 1

原因是您使用的CSS赋值语法错误。控制台会提醒您这一点。进行如下更改。

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
<body>
<p id="paragraph">This is a paragraph</p>
<button>Click me</button>
<script type="text/Javascript">

    $("button").click(function(){
        if ($("#paragraph").css("display") =="none"){
            $("#paragraph").css("display", "block");
            $("#paragraph").css("opacity", '1');
             
        }
        else{
            $("#paragraph").fadeOut();
        }
        
    });


</script>
</body>

您可以忽略我如何包含jquery。我这样做只是为了确保它在这里可以运行。

Answer 2

使用快捷方式show()代替css()使其简单

$("button").click(function() {
  const $p = $("#paragraph");// cache element reference once for efficiency
  if ($p.is(':hidden')) {
    $p.show();
  } else {
    $p.fadeOut();
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="paragraph">This is a paragraph</p>
<button>Click me</button>

我们可以使用CSS代替jQuery中的.fadeIn（）吗？

2 个答案: