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

Popular posts from this blog

twig - Using Twigbridge in a Laravel 5.1 Package -

jdbc - Not able to establish database connection in eclipse -

firemonkey - How do I make a beep sound in Android using Delphi and the API? -