首頁猿問我們可以使用 CSS 代替...

我們可以使用 CSS 代替 jQuery 中的 .fadeIn() 嗎？

JavaScript

幕布斯6054654 2022-11-11 13:37:10

.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>

查看完整描述

2 回答

皈依舞

TA貢獻1851條經驗獲得超3個贊

原因是您使用的 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>

$("button").click(function(){

if ($("#paragraph").css("display") =="none"){

$("#paragraph").css("display", "block");

$("#paragraph").css("opacity", '1');

}

else{

$("#paragraph").fadeOut();

}

});

</script>

</body>

你可以忽略我是如何包含 jquery 的。我這樣做只是為了確保它在這里都可以運行。

反對回復 2022-11-11

料青山看我應如是

TA貢獻1772條經驗獲得超8個贊

使用快捷方式show()而不是css()讓它變得簡單

$("button").click(function() {

const $p = $("#paragraph");// cache element reference once for efficiency

if ($p.is(':hidden')) {

$p.show();

} else {

$p.fadeOut();

}

});

<p id="paragraph">This is a paragraph</p>

<button>Click me</button>

反對回復 2022-11-11

2 回答
0 關注
127 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

我們可以使用 CSS 代替 jQuery 中的 .fadeIn() 嗎？

我們可以使用 CSS 代替 jQuery 中的 .fadeIn() 嗎？

2 回答

添加回答

我們可以使用 CSS 代替 jQuery 中的 .fadeIn() 嗎？

我們可以使用 CSS 代替 jQuery 中的 .fadeIn() 嗎？