CODEWITHSUNDEEP
javascriptjquerycsscss-animations
Leo
Leo

Reputation: 7449

CSS animation to change element height

I am probably missing something obvious here. I have a basic animation that is triggered on an element hover. It works perfectly. But I want it to add some specific movements too. I tried to just addClass("") the style but it did not work. Is this possible?

I know I can just call $(element).hide(); - but I would like to run the animation just by adding the specific class to the element, if possible.

Here is my code:

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

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;
}

Upvotes: 1

Views: 310

Answers (4)

springbo
springbo

Reputation: 1096

you need to put !important on the hide class. Otherwise it get's overwritten by the id selector.

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

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

Also it's probably a good idea to include vendor prefixes to the css if you aren't doing it already.

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

Upvotes: 1

dfsq
dfsq

Reputation: 193261

Declare you style like this:

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

Demo: http://jsfiddle.net/PR9xF/9/

It's all about rules priorities. When you just define .hide alone it has lower weight then #hideme so your transition is never applied.

Upvotes: 4

whatisdot
whatisdot

Reputation: 26

Is this what you're looking for? 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;
}

Upvotes: 0

Marcel
Marcel

Reputation: 375

try this css:

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

Upvotes: 0

Related Questions