Question

我试图在几页上使用jQuery制作大量动画，我想知道如何以更简单的方式做到这一点，因为这需要很长时间，并且在我必须获得的时间范围内有很大的错误空间它完成了。

$( document )
    .ready( fade1 );
function fade1(){
    $("#fade")
        .delay(1000)
        .fadeIn(1000, fade2)
    function fade2(){
        $("#fade2")
            .delay(1000)
            .fadeIn(1000, s1)
        function s1(){
            $("#s1")
                .delay(300)
                .fadeIn(100, s2)
            function s2(){
                $("#s2")
                    .delay(300)
                    .fadeIn(100, s3)
                function s3(){
                    $("#s3")
                        .delay(300)
                        .fadeIn(100, s4)
                    function s4(){
                        $("#s4")
                            .delay(300)
                            .fadeIn(100, s5)
                        function s5(){
                            $("#s5")
                                .delay(300)
                                .fadeIn(100, s6)
                            function s6(){
                                $("#s6")
                                    .delay(300)
                                    .fadeIn(100, s7)
                                function s7(){
                                    $("#s7")
                                        .delay(300)
                                        .fadeIn(100, s8)
                                    function s8(){
                                        $("#s8")
                                            .delay(300)
                                            .fadeIn(100, s9)
                                        function s9(){
                                            $("#s9")
                                                .delay(300)
                                                .fadeIn(100, s10)
                                            function s10(){
                                                $("#s10")
                                                    .delay(300)
                                                    .fadeIn(100, s11)
                                                function s11(){
                                                    $("#s11")
                                                        .delay(300)
                                                        .fadeIn(100, s12)
                                                    function s12(){
                                                        $("#s12")
                                                            .delay(300)
                                                            .fadeIn(100, all)
                                                        function all(){
                                                            $("#s1, #s2, #s3, #s4, #s5, #s6, #s7, #s8, #s9, #s10, #s11, #s12")
                                                                .delay(100)
                                                                .fadeOut(500)
                                                                .delay(100)
                                                                .fadeIn(500);
                                                        }}}}}}}}}}}}}}};

Answer 1

我会研究使用CSS动画和/或过渡。这样你根本不需要使用javascript。

看起来像

@keyframes my-fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

#fade {
    animation-name: my-fade-in;
    animation-duration: 1s;
    animation-delay: 1s;
}

这会导致my-fade-in动画立即显示在#fade元素上，延迟时间为一秒。

如果要以编程方式应用动画，可以将动画属性存储在类中，并将该类应用于您要设置动画的元素。例如;

CSS：

@keyframes my-fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

.fadein {
    animation-name: my-fade-in;
    animation-duration: 1s;
    animation-delay: 1s;
}

Javascript（运行它将触发#fade元素上的fadein动画）：

$( "#fade" ).addClass( "fadein" );

这简化了上面概述的场景，您需要将一组不同的动画应用于一组不同的对象。

您甚至可以使用其他关键帧（而不是显示的0％和100％值）构建更高级的动画。

我真的无法就如何在不知道动画背后的原因或目标的情况下实现这一目标给出任何建议 - 我不确定为什么你有这么多具有唯一ID的元素动画以这种方式应用，但我希望这有助于：）

注意：请查看this page以查看支持CSS动画的浏览器兼容性图表。

Answer 2

在您的示例中使用jQuery，您可以执行以下操作：

$(document).ready(function(){
    var totalElements = 12,
        firstEl = 1,
        duration = 1000;

    var fadeNext = function(){
        firstEl++;

        if(firstEl <= totalElements) {
            $('#fade'+firstEl).fadeIn(duration, fadeNext);
        }
        return;
    }
    $("#fade").delay().fadeIn(duration, fadeNext);
});

有没有简便方法或更简单的方法来做到这一点？

2 个答案: