jquery - 我怎样才能让 jQuery 动画在完成后无限循环？

Question

我有一个 jQuery 动画，我有一只飞猴，它必须从左到右和从右到左旋转，工作正常，但我必须让猴子循环。现在我已经即兴创作了，我已经将几个 div 相互插入，在预览 div 完成旋转后旋转。

HTML:

<a href="">
    <div class="container-banner-jquery-disney-relaxare">
        <img src="img/nori.png" class="fundal-animat">
        <div class="personaj">
            <div class="personaj-rotatie1">
                <div class="personaj-rotatie2">
                    <div class="personaj-rotatie3">
                        <div class="personaj-rotatie4">
                            <div class="personaj-rotatie5">
                                <div class="personaj-rotatie6">
                                    <img src="img/personaj.png">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</a>

CSS:

    .container-banner-jquery {
        width: 700px;
        height: 470px;
        overflow: hidden;
        background-image: url(img/funal.jpg);
        position: relative;
    }

    .fundal-animat {
        width: 700px;
        height: auto;
        position: relative;
        top: -860px;
        z-index: 997;
    }

    .personaj {
        width: auto;
        z-index: 999;
        left: -65px;
        top: -400px;
        position: absolute;
    }

JS:

    $.fn.animateRotate = function (angle, duration, easing, complete) {
        var args = $.speed(duration, easing, complete);
        var step = args.step;
        return this.each(function (i, e) {
            args.step = function (now) {
                $.style(e, 'transform', 'rotate(' + now + 'deg)');
                if (step) return step.apply(this, arguments);
            };

            $({
                deg: 0
            }).animate({
                deg: angle
            }, args);
        });
    };



    $(function () {
        $(document).ready(function () {
            $(".personaj-rotatie1").animateRotate(20, 2000, "linear", function () {
                $(".personaj-rotatie2").animateRotate(-20, 2000, "linear", function () {
                    $(".personaj-rotatie3").animateRotate(20, 2000, "linear", function () {
                        $(".personaj-rotatie4").animateRotate(-20, 2000, "linear", function () {
                            $(".personaj-rotatie5").animateRotate(20, 2000, "linear", function () {
                                $(".personaj-rotatie6").animateRotate(-20, 2000, "linear", function () {

                                });
                            });
                        });
                    });
                });
            });
        });
    });

那么我怎样才能用“personaj”类循环来制作div内容的动画呢？谢谢

Answer 1

您可以通过使用 @keyframes 仅在 CSS 中实现此目的。试试这个:

@-moz-keyframes rotating {
    0% { -moz-transform: rotate(-20deg); }
    50% { -moz-transform: rotate(20deg); }
    100% { -moz-transform: rotate(-20deg); }
}
@-webkit-keyframes rotating {
    0% { -webkit-transform: rotate(-20deg); }
    50% { -webkit-transform: rotate(20deg); }
    100% { -webkit-transform: rotate(-20deg); }
}
@keyframes rotating {
    0% { transform: rotate(-20deg); }
    50% { transform: rotate(20deg); }
    100% { transform: rotate(-20deg); }
}
.rotating {
    -webkit-animation: rotating 2s ease-in-out infinite;
    -moz-animation: rotating 2s ease-in-out infinite;
    -ms-animation: rotating 2s ease-in-out infinite;
    -o-animation: rotating 2s ease-in-out infinite;
    animation: rotating 2s ease-in-out infinite;
}

<img src="http://i.imgur.com/NVIpvHo.jpg" class="rotating" />