我可能在这里遗漏了一些明显的东西。我有一个在元素悬停时触发的基本动画。它工作得很好。但我也希望它添加一些特定的 Action 。我尝试只添加 addClass("")
样式,但它不起作用。这可能吗?
我知道我可以调用 $(element).hide();
- 但如果可能的话,我想通过将特定类添加到元素来运行动画。
这是我的代码:
html
<ul>
<li></li>
<li id="hideme"></li>
<li></li>
</ul>
<button id="bt">Click</button>
js
$("#bt").click(function () {
$("#hideme").removeClass("hide");
$("#hideme").addClass("hide");
});
CSS
ul {
list-style-type:none;
}
li {
margin-bottom:5px;
background-color:silver;
height:120px;
max-height:120px;
}
#hideme {
max-height: 500px;
transition: max-height 1s ease-in;
}
#hideme:hover {
max-height: 0;
transition: max-height 1s ease-out;
overflow: hidden;
background: #d5d5d5;
}
.hide {
max-height: 0;
transition: max-height 1s ease-out;
overflow: hidden;
background: #d5d5d5;
}
最佳答案
声明你的风格是这样的:
#hideme:hover,
#hideme.hide {
max-height: 0;
transition: max-height 1s ease-out;
overflow: hidden;
background: #d5d5d5;
}
演示:http://jsfiddle.net/PR9xF/9/
一切都与规则优先级有关。当您仅定义 .hide
时,它的权重低于 #hideme
,因此永远不会应用您的过渡。
关于javascript - 改变元素高度的CSS动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21943056/