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
Post a Comment