1

my goal is to write a jquery that flips an image on the vertical y-axis after every 3 seconds and shows another image in the back.It is suppose to keep filliping the images back and front. Bellow you can see my script that I put together using to other examples. I am unable to execute the said function and I don't get any errors from the browser. I'm new to jquery

I'm using this example:

http://jsfiddle.net/gaby/kSR9H/2/

here is my 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>
Michail Michailidis
  • 11,792
  • 6
  • 63
  • 106
user2864059
  • 45
  • 1
  • 8
  • You seem to be missing the setTimeOut wait time? Is that a typo? _`setTimeout(function,milliseconds)`_ – haxtbh Oct 18 '14 at 16:45
  • isn't that suppose to be at the end of the function like }, 2000); – user2864059 Oct 18 '14 at 16:49
  • I think you're confusing `setTimeout` and `setInterval`. `setTimeout` will only run once after 2 seconds (according to your code). – J. Titus Oct 18 '14 at 16:51
  • yes I changed it to setinterval as provided in the examples below. Still no results and no error! – user2864059 Oct 18 '14 at 17:07
  • Check my answer - you can do the same thing with just css3 ;) Btw you should change your title to be infinite image flip with two faces and make the syntax of it to a question ;) – Michail Michailidis Oct 18 '14 at 22:49
  • I added another answer with an example/demo of using setInterval. **However, Michail Michailidis' answer is better than mine and, if you can make it work, should be the correct answer to your question.** – cssyphus Oct 20 '14 at 16:07
  • 1
    Have you solved your problem? If so, please select a correct answer by clicking the checkmark next to an answer (please either write your own solution and select it, or select Michail's answer as his is the best solution presented at the moment.) – cssyphus Oct 23 '14 at 21:47

4 Answers4

1

Inspired by How can I animate my image infinitely using CSS3 and How do I chain an infinite css animation to a one-time css animation? You don't necessarily need Jquery - but if you need just replicate Rotate,BackRotate

You can do an infinite animated flip of two faces like that with just CSS3 (http://jsfiddle.net/aojp8ozn/62/) - Update now it works with 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 {
     from {-webkit-transform:rotateY(0deg);}
     to {-webkit-transform:rotateY(360deg);}
}
@-webkit-keyframes BackRotate {
     from {-webkit-transform:rotateY(180deg);}
     to {-webkit-transform:rotateY(540deg);}
} 

@keyframes Rotate {
     from {-webkit-transform:rotateY(0deg);}
     to {-webkit-transform:rotateY(360deg);}
}

@keyframes BackRotate {
    from {-webkit-transform:rotateY(0deg);}
    to {-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>
Community
  • 1
  • 1
Michail Michailidis
  • 11,792
  • 6
  • 63
  • 106
  • 1
    Very interesting answer! How would you insert a delay, as the OP desires the rotations only every three seconds? +1 – cssyphus Oct 19 '14 at 14:07
  • Well that is easy! ;) based on this one: http://stackoverflow.com/questions/11689802/pause-between-keyframe-animations you make the animation time 6s and then for BackRotate and Rotate instead of from and to, you use 50% and 100%. That is 50% of the time or 3s will be waiting ;) If you want any delay before the first animation you have to put 0% and 50% instead. Here is a fiddle demonstrating that : http://jsfiddle.net/6abdrpj3/ – Michail Michailidis Oct 19 '14 at 22:40
  • what browser are you using and what version? I checked and it works with both Firefox and Chrome. You most probably have Internet Explorer – Michail Michailidis Oct 21 '14 at 13:15
  • hi, I'm using Firefox and chrome and they are up to date. – user2864059 Oct 21 '14 at 14:57
  • hi! I don't know why this happens - could be a graphics card issue or are you running these on Linux or MacOS? I tried through multiple machines and it works fine - try different machines etc or give more specifics about your OS/browser versions - I see that you have the same issue with the other answer that uses jquery only - it is most probably an issue with your system – Michail Michailidis Oct 21 '14 at 15:00
  • @gibberish did you check my jsfiddle? – Michail Michailidis Oct 22 '14 at 21:06
  • Your fiddle definitely isn't working - I'm using Firefox – Lee Oct 21 '15 at 13:45
  • @Lee yeap the code is webkit specific .. I am not sure how mozilla is doing keyframes etc.. – Michail Michailidis Oct 21 '15 at 14:57
  • @Lee I updated the code since these are native now: http://jsfiddle.net/aojp8ozn/62/ – Michail Michailidis Oct 21 '15 at 15:02
0

Instead of setTimeout, you can use setInterval, which will repeat every so-many seconds:

setInterval(function() {
    $('#front').animate({
        rotateY: "+-" + (Math.PI)/2
    }, 500, function() {
        $(this).toggleClass('back');
     }).animate({
        rotateY: "+-" + (Math.PI)/2
}, 3000);

recursive function vs setInterval vs setTimeout javascript

This is not an answer as it does not address your primary question about setTimeout. However, it might help you get the job done faster.

If you are okay to use a plugin, try this one. Unfortunately, Marty's DEMO server is temporarily down, so I'll include another demo:

Flippy jQuery Plugin

Demo

HTML:

<div id="fb1" class='flipbox'>flippy 1</div>
<div id="fb2" class='flipbox'>flippy 2</div>
<div id="fb3" class='flipbox'>flippy 3</div>

<div style="display:none;">
    <div id="fb1b">back of flippy 1</div>
    <div id="fb2b">back of flippy 2</div>
    <div id="fb3b">back of flippy 3</div>    

<div>

jQuery:

$('.flipbox').click(function() {
    if($(this).hasClass('flipped')) {
        $(this).revertFlip();
        $(this).removeClass('flipped');
    } else {

        var id = $(this).attr('id') + 'b';
        $(this).flip({direction: 'tb', content: $('#'+id).html() });
        $(this).addClass('flipped');              



    }
});

CSS:

.flipbox {
  background-color: #ff9000;
  font-family: 'ChunkFive Regular', Tahoma, Helvetica;
  font-size: 17px;
  color: #ffffff;
  text-align: center;
  padding: 10px;
}
Community
  • 1
  • 1
cssyphus
  • 37,875
  • 18
  • 96
  • 111
  • thank you for your answer,I know how to flip the pictures manually by onclick function but I want to make it so it flips automatically every 3 sec – user2864059 Oct 18 '14 at 16:55
  • I checked your update, still no results! I get the two images on the screen simultaneously. No function is being executed – user2864059 Oct 18 '14 at 17:02
0

use setInterval instead of setTimeout (only replace the function name)

user2717954
  • 1,822
  • 2
  • 17
  • 28
  • yes it does but for that I only have to add this line to the containing div: ontouchstart="this.classList.toggle('hover'); – user2864059 Oct 18 '14 at 17:19
  • Yes it is the same result with onclick as well. I am using this example: http://jsfiddle.net/gaby/kSR9H/2/ – user2864059 Oct 18 '14 at 17:24
0

Here is a working example that takes your existing code, adds a setInterval, and flips the div every 3 seconds:

jsFiddle Demo

//Your code

$("p").click(function() {
    $(this).animate({
        rotateY: "+=" + (Math.PI) / 2
    }, 500, function() {
        $(this).toggleClass('flipped');
    }).animate({
        rotateY: "+=" + (Math.PI) / 2
    }, 500);
});

//New code

setInterval(function(){
    $("p").trigger('click');
},3000);

Note: the above code requires the jQuery library. Be sure to include in in the <head> tags of your document, like this:

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
cssyphus
  • 37,875
  • 18
  • 96
  • 111