CODEWITHSUNDEEP
jqueryhtmlcssanimation
FlyingCat
FlyingCat

Reputation: 14290

How to create animation in my case?

I am trying to create a transition for my elements. All the examples I saw are using :hover state. However, I need to fire the transition when I click a link.

Here is my html

html

<a id='fireme' href=''>FIRE</a>
<div id='test'> Test title 1</div>

CSS

#test{
   background-color: red;
   height: 100px;
   width: 150px;
   transition: all 2s ease-out;
}

.newWidth{
   width: 250px;
}

JS

$('#fireme').click(function(){
    $('#test').addClass('newWidth')
})

However, when I click the link, nothing happens at all and the width still stay as 150px

Can anyone help me out on this? Thanks!

Upvotes: 0

Views: 39

Answers (1)

Deele
Deele

Reputation: 3682

That is because of CSS style rules cascade order.

In your case, style rule with identifier has higher priority than that of rule with class.

If you would use class in the first hand, then you will get what you require.

In your HTML, add class attribute

<a id='fireme' href=''>FIRE</a>
<div id='test' class='test'> Test title 1</div>

And in CSS change rules

.test{
   background-color: red;
   height: 100px;
   width: 150px;
   transition: all 2s ease-out;
}

.newWidth{
   width: 250px;
}

See it in action http://jsfiddle.net/36BkX/

Otherwise, you need to rise priority of your CSS rule

#test{
   background-color: red;
   height: 100px;
   width: 150px;
   transition: all 2s ease-out;
}

.newWidth{
   width: 250px !important;
}

And leave rest as it is now

Upvotes: 1

Related Questions