How to do infinite animated flip of two-faced image using Jquery settimeout function -
my goal write jquery flips image on vertical y-axis after every 3 seconds , shows image in back.it suppose maintain filliping images , front. bellow can see script set using other examples. unable execute said function , don't errors browser. i'm new jquery
i'm using example:
http://jsfiddle.net/gaby/ksr9h/2/
here script:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="generator" content="coffeecup html editor (www.coffeecup.com)"> <meta name="dcterms.created" content="la, 18 loka 2014 16:05:10 gmt"> <meta name="description" content=""> <meta name="keywords" content=""> <title></title> <!--[if ie]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="flipper"> <div id="front"> <img src="img\1.11.jpg" /> </div> <div class="back"> <img src="img\1.12.jpg" /> </div> </div> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script> $(document).ready(function() { settimeout(function() { $('#front').animate({ rotatey: "+-" + (math.pi)/2 }, 500, function() { $(this).toggleclass('back'); }).animate({ rotatey: "+-" + (math.pi)/2 }, 2000); }); }); </script> </body> </html>
inspired how can animate image infinitely using css3 , how chain infinite css animation one-time css animation? don't need jquery - if need replicate rotate,backrotate
you can infinite animated flip of 2 faces css3 (http://jsfiddle.net/aojp8ozn/62/) - update works firefox
css:
#f1_container { position: relative; margin: 10px auto; width: 69px; height: 69px; z-index: 1; } #f1_container { perspective: 1000; } #f1_card { width: 100%; height: 100%; } .face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } .face.back { display: block; color: white; text-align: center; background-color: #aaa; } .face.back { -webkit-animation: backrotate 2000ms linear 00ms infinite; animation: backrotate 2000ms linear 0ms infinite; } .face.front { -webkit-animation: rotate 2000ms linear 0ms infinite; animation: rotate 2000ms linear 0ms infinite; } img { width: 69px; height:69px; } @-webkit-keyframes rotate { {-webkit-transform:rotatey(0deg);} {-webkit-transform:rotatey(360deg);} } @-webkit-keyframes backrotate { {-webkit-transform:rotatey(180deg);} {-webkit-transform:rotatey(540deg);} } @keyframes rotate { {-webkit-transform:rotatey(0deg);} {-webkit-transform:rotatey(360deg);} } @keyframes backrotate { {-webkit-transform:rotatey(0deg);} {-webkit-transform:rotatey(360deg);} } html:
<div id="f1_container"> <div id="f1_card" class="shadow"> <div class="front face"> <img src="http://upload.wikimedia.org/wikipedia/commons/1/19/wikipedia_logo_red.png"/> </div> <div class="back face"> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:and9gcti0zoikxislu2c--rwyltry7-gu9yrl2nlt_hwrom1vgzocxc2v_3i4q"/> </div> </div> </div> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> jquery
No comments:
Post a Comment