anyway to add css3 transition animation to element on jQuery event

Question

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>

appi2012 · Accepted Answer · 2011-04-08 00:25:38Z

1

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.

answered Apr 8, 2011 at 0:25

appi2012

2181 gold badge2 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mcbeav Over a year ago

that isn't working for me, nothing happens when the button is clicked.

mcbeav Over a year ago

it works in a fiddle, but i am trying to get it to work. looks like i just am missing something in my actual code. thank!

marty · Accepted Answer · 2013-09-11 11:46:09Z

1

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."

answered Sep 11, 2013 at 11:46

marty

4845 silver badges19 bronze badges

Collectives™ on Stack Overflow

anyway to add css3 transition animation to element on jQuery event

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related