jQuery的连续来回旋转动画 [英] jQuery continous back and forth rotation animation

问题描述

我需要一些帮助与此有关。

I need some help with this.

我做了一个漂亮的网页工具包动画在我的网站的内容之一。它应该转动7度来回连续进行。
遗憾的是它只能在Chrome中。这里是code：

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);}
} 

所以我想我使用一些jQuery的不支持WebKit的动画的浏览器。
我尝试了许多变化，但是毫无效果。

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

我下载了jQuery在旋转插头（的https：//$c$c.google .COM / p / jqueryrotate / ）

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

我想是这样的：

<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.

不知道如何使它循环？

帮助将非常AP preciated。谢谢！

Help would be much appreciated. Thank you!

推荐答案

为什么不只是有方法调用本身呢？因此，有动画到7呼叫对方，反之亦然之一。事情是这样的：

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.

修改

你可能在你的code错误？我做了一些更简单，但它为我工作，不断：

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();

这是一个简单的例子，但它在为我的作品我的js小提琴

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

编辑2

下面是一个工作的例子......只是为了确保，该文件说，使用IMG标记 - 你的#brk是IMG标记，对不对？否则，试试看相比，矿上这个小提琴什么是在你的不同

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

这篇关于jQuery的连续来回旋转动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！