CODEWITHSUNDEEP
javascriptjquerycss
Unknown
Unknown

Reputation: 257

Doing a css3 transition with on click jquery event?

I have this css which does a slide out transition

.slide_animation {
    transition: 10s;
    left: 0px !important;
    -webkit-transition-duration:800ms
}

and using jquery:

$(".shop_look").click(function(){
      $("#look").show();
      $("#look").addClass("slide_animation");
      $(this).fadeOut(2000);
   })

this works but there is no easing when the #look element shows, its too snappy, I want it to ease out like a smooth animation. thanks

Upvotes: 1

Views: 78

Answers (1)

adeneo
adeneo

Reputation: 318332

It doesn't look like you're using that correctly, the display property has only two states, so you should probably use the opacity property instead (or both) :

#look {
    opacity:0;
    -webkit-transition-duration:800ms;
}

#look.slide_animation {
     opacity:1;
}

FIDDLE

If you don't want transitions on everything, you can specify the property as well:

transition-property: opacity;

Upvotes: 2

Related Questions