HTML:<div class="display-none">
CSS:.display-none { display: none; }
JS:removeClass('display-none')
和addClass('display-none')
是否有可能“在淡入”创建和“淡出”效果时,div.display-没有失去/获取显示none类?
只有在使用CSS效果(如悬停)时,我才能使它起作用:
.random-btn {
background-color: red;
transition-timing-function: ease;
transition-delay: 1s;
transition-duration: 0.5s;
}
.random-btn:hover {
background-color: blue;
}
答案 0 :(得分:0)
转换不适用于display属性。不显示/块是二进制状态-它是否存在。但是您可以使div始终display: block
,然后为opacity: 0
设置动画。
查看this answer以获取完整示例
答案 1 :(得分:0)
您肯定可以通过在jQuery中使用.fadeToggle()而不是仅使用toggleClass。
演示:https://codepen.io/anon/pen/daWMjp
您还可以在此处阅读有关效果的jQuery文档的更多信息:http://api.jquery.com/category/effects/
HTML
I have a dateadded column
-----------------------------
Firstname|Lastname|dateadded
Michael |Jordan |2019-02-03 <-(Feb 3, 2019)
Mark |Perez |2019-01-30
Paul |George |2019-01-28
John |Wayne |2019-01-25
-----------------------------
CSS
select * from names WHERE YEARWEEK(`dateadded`, 1) = YEARWEEK(CURDATE(), 1)
jQuery
<div class="this-div">
<p>Text in the Div</p>
</div>
<div>
<button class="toggle-btn">Toggle Hide/Show</button>
</div>