jquery - How to trigger transition plugin on click? -


i found plugin http://jsfiddle.net/addyosmani/a89sq/show/ animates bars when page loads. want animations start individually when each bar clicked on. idea how this?

thanks

here code

$(window).load(function () {     $(function () {         function updatestatus(msg) {             $('.status').html(msg);         }          function compattest() {             if (modernizr.csstransitions) {                 $('.compat span').html('yes');             }         }         compattest();         $('.alt0').animate({             width: '480px'         }, 4000, function () {             updatestatus('animation 1 complete');         });         $('.alt1').animate({             width: '480px'         }, 5000, function () {             updatestatus('animation 2 complete');         });         $('.alt2').animate({             width: '480px'         }, 20000, function () {             updatestatus('animation 3 complete');         });     }); }); 

html

    <div class="container">     <div id="one" class="bar">         <div class="box alt0"></div>     </div>     <div class="bar">         <div class="box alt1"></div>     </div>     <div class="bar">         <div class="box alt2"></div>     </div> </div> 

i can't see animation in browser (firefox), code set animation on click following.

$('.alt0').click(function(){     $(this).animate({width: '480px'}, 4000, function(){         updatestatus('animation 1 complete');     }); });  $('.alt1').click(function(){     $(this).animate({width: '480px'}, 5000, function () {         updatestatus('animation 2 complete');     }); });  $('.alt2').click(function(){     $(this).animate({width: '480px'}, 20000, function () {         updatestatus('animation 3 complete');     }); }); 

Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -