jQuery continous back and forth rotation animation

问题

I need some help with this.

I made a nice web kit animation for one of the elements on my site. It is supposed to rotate 7 degrees back and forth continuously. Unfortunately it works only in Chrome. Here is the code:

#brk {
background: url("../images/brk.png");
width: 118px;
height: 54px;
display: block;
position: relative;
top: 65px;
left: 93px;
     -webkit-animation: brk-spin 3s infinite linear;
     -moz-animation: brk-spin 3s infinite linear;
     -o-animation: brk-spin 3s infinite linear;
     -ms-animation: brk-spin 3s infinite linear;
}


@-webkit-keyframes brk-spin {
0% { -webkit-transform: rotate(0deg);}
25% { -webkit-transform: rotate(-7deg);}
50% { -webkit-transform: rotate(0deg);}
75% { -webkit-transform: rotate(7deg);}
100% { -webkit-transform: rotate(0deg);}
}

@-moz-keyframes brk-spin {
0% { -webkit-transform: rotate(0deg);}
25% { -webkit-transform: rotate(-7deg);}
50% { -webkit-transform: rotate(0deg);}
75% { -webkit-transform: rotate(7deg);}
100% { -webkit-transform: rotate(0deg);}
}

@-o-keyframes brk-spin {
0% { -webkit-transform: rotate(0deg);}
25% { -webkit-transform: rotate(-7deg);}
50% { -webkit-transform: rotate(0deg);}
75% { -webkit-transform: rotate(7deg);}
100% { -webkit-transform: rotate(0deg);}
}

@-ms-keyframes brk-spin {
0% { -webkit-transform: rotate(0deg);}
25% { -webkit-transform: rotate(-7deg);}
50% { -webkit-transform: rotate(0deg);}
75% { -webkit-transform: rotate(7deg);}
100% { -webkit-transform: rotate(0deg);}
}

So I thought I use some jQuery for the browsers that does not support the webkit animation. I tried many variation, but nothing worked.

I downloaded the jQuery rotate plug in ( https://code.google.com/p/jqueryrotate/ )

I tried something like this:

<script>
if(!Modernizr.cssanimation) { 
    $(function() {

    $('#brk').stop().rotate({ angle:0, animateTo: 7, duration:600, callback: 

function() {
        $('#brk').stop().rotate({ animateTo: -7, duration:600});
        }
    });

(function roty() {
     setTimeout(function() { roty() },1200);
             })();
       });
}
</script>

But whit this the image (div with background) swings only once back and forth and it stops.

Any idea how to make it loop?

Help would be much appreciated. Thank you!

回答1:

Why not just have the method call itself? So have the one that animates to 7 call the other, and vice versa. Something like this:

function rotateSeven() {
    $('#brk').stop().rotate({ angle:0, animateTo: 7, duration:600, callback: function() {
        rotateNegative();
        }
    });
}

function rotateNegative() {
    $('#brk').stop().rotate({ angle:0, animateTo: -7, duration:600, callback: function()  {
        rotateSeven();
        }
    });
}

Then when you call one of them, they would continue to call each other. I'm not sure if this would be the best way to do it though, as I've not tried to animate in the way you are here.

EDIT

Do you possibly have an error in your code? I did something more simple, but it works for me, continuously:

function fadeIn() {
    jQuery("#test").fadeIn();
    fadeOut();
}

function fadeOut() {
    jQuery("#test").fadeOut();
    fadeIn();
}

fadeOut();

That is a simple example, but it works for me in my Js Fiddle

EDIT 2

Here is a working example... Just to make sure, the documentation says to use an IMG tag - your #brk is an IMG tag, right? Otherwise, try and see what is different in yours compared to mine on this fiddle

来源：https://stackoverflow.com/questions/16150846/jquery-continous-back-and-forth-rotation-animation

标签

jquery

animation

rotation