CODEWITHSUNDEEP
jqueryanimationcsstransition
mcbeav
mcbeav

Reputation: 12275

anyway to add css3 transition animation to element on jQuery event

is there a way to add a css3 animation upon a jQuery event for example:

<style>
.box{
width:100px;
height:100px;
bakground-color:#000;
}

.animate{
 width:0px;
 -webkit-transition-property: width; -webkit-transition-duration: 500ms;
 -moz-transition-property: width; -moz-transition-duration: 500ms;
}

<style>

<html>
<div class="box"></div>

<button>click me to animate</button>

$('button').click(function(){
$('.box').addClass('animate');
});

</html>

Upvotes: 0

Views: 1676

Answers (2)

marty
marty

Reputation: 484

I think animo.js could be your answer http://labs.bigroomstudios.com/libraries/animo-js (via http://tympanus.net/codrops/collective/collective-80/)

Per their site...

"You can easily stack animations to fire one after another, specify callbacks for the completion of an animation, or simply fire animations on any event or at any moment you please."

Upvotes: 1

appi2012
appi2012

Reputation: 218

Just put the 

 -webkit-transition-property: width; -webkit-transition-duration: 500ms;
     -moz-transition-property: width; -moz-transition-duration: 500ms;

in the .box declaration. Your JS is fine.

Upvotes: 1

Related Questions