jQuery animate back to start after time -
i have 3 blocks images in, overlayed onto transparent screen , block of text. on touch device when user touches href link first time semi transparent screen , text animate up.
i have function doing when checked user on mobile device:
if(ismobile.any()) $('.animblock a').on('touchstart', function(e) { $(this).filter(':not(:animated)').find('.animtransp').animate({top:"0"}, 300); // animate screen opacity on touch $(this).filter(':not(:animated)').find('.animtext').animate({top:"30px"}, 300); // animate text on touch }); ;
this works animating them on device such ipad.
what i'd have timer after 3 seconds if user has not clicked link again go page animate 2 divs down original position.
any appreciated.
thanks
add timeout on 1 of completed animations
if (ismobile.any()) { $('.animblock a').on('touchstart', function(e) { var animationtrans = $(this).filter(':not(:animated)').find('.animtransp'); var animationtext = $(this).filter(':not(:animated)').find('.animtext'); animationtrans.animate({top:"0"}, 300); // animate screen opacity on touch animationtext.animate({top:"30px"}, 300, function(){ settimeout(function() { animationtext.animate({top:'-30px'}); animationtext.animate({top:"0"}); }, 3000); }); }); }
i not recommend using jquery animation @ all. rather use css.
<style> .animtransp { top:-30px; position:relative; transition: top 0.3s; } .animtransp.active { top:0; } .animtext { top: 0; position:relative; transition: top 0.3s;} .animtext.active { top:30px; } </style>
then js follows:
if (ismobile.any()) { $('.animblock a').on('touchstart', function(e) { var animationtrans = $(this).find('.animtransp:not(.active)'); var animationtext = $(this).find('.animtext:not(.active)'); animationtext.add(animationtrans).addclass('active'); settimeout(function() { animationtext.add(animationtrans).removeclass('active') }, 3000); }); }
would need prefix transition property webkit mobile
Comments
Post a Comment