我们可以使用 CSS 代替 jQuery 中的 .fadeIn() 吗？
.fadeOut() 方法动画匹配元素的不透明度。一旦不透明度达到 0，显示样式属性设置为无，因此元素不再影响页面的布局。
如果上述情况属实，那么为什么我在恢复该段落时遇到问题？
$("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>
幕布斯6054654浏览 120回答 2
2回答
-
皈依舞
原因是您使用的 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 的。我这样做只是为了确保它在这里都可以运行。 -
料青山看我应如是
使用快捷方式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>
随时随地看视频慕课网APP
相关分类
JavaScript