Question

我可能在这里遗漏了一些明显的东西。我有一个在元素悬停时触发的基本动画。它完美地运作。但我希望它也能添加一些特定的动作。我试着只是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;
}

Answer 1

声明你的风格如下：

#hideme:hover, 
#hideme.hide {
    max-height: 0;
    transition: max-height 1s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}

演示：http://jsfiddle.net/PR9xF/9/

关于规则优先事项。如果您只是单独定义.hide，那么它的权重会低于#hideme，因此您的转换永远不会应用。

Answer 2

你需要把重要的东西放在hide类上。否则它会被id选择器覆盖。

...
.hide {
    max-height: 0 !important;
...

http://jsfiddle.net/PR9xF/1/

如果您还没有将供应商前缀包含在css中，也可能是个好主意。

-webkit-transition: all .25s ease-out;
   -moz-transition: all .25s ease-out;
    -ms-transition: all .25s ease-out;
     -o-transition: all .25s ease-out;
        transition: all .25s ease-out;

Answer 3

试试这个css：

   .hide {
      display: block;
      transition: opacity 1s ease-out;
      opacity: 0; 
      height: 0;
      overflow: hidden;
      background: #d5d5d5;
    }

Answer 4

这是你要找的吗？ http://jsfiddle.net/PR9xF/5/

<强> JS

$("#bt").click(function () {
    $("#hideme").addClass("hide");
});

<强> CSS

ul {
    list-style-type:none;
}

li {
    margin-bottom:5px;
    background-color:silver;
    height:120px;
    max-height:120px;
}

.hide {
    max-height: 500px;
    transition: max-height 1s ease-in;
}

.hide:hover {
    max-height: 0;
    transition: max-height 1s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}

CSS动画改变元素高度

4 个答案:

演示：http://jsfiddle.net/PR9xF/9/