Есть ли более простой или сокращенный способ сделать это?

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

jquery

0

Weirdest 3 Апр 2014 в 05:15

Хорошо, это вызвало у меня головокружение. Не могли бы вы использовать .fadeToggle()?

–

Jack

3 Апр 2014 в 05:26

Answer 1

Глядя на использование 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);
});

1

Keith Morris 3 Апр 2014 в 05:28

Answer 2

Я бы посмотрел на использование 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):

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

Это немного упрощает ситуацию для сценариев, подобных описанным выше, где вам нужен набор различных анимаций, применяемых к набору различных объектов.

Вы даже можете создать более продвинутую анимацию с дополнительными ключевыми кадрами (вместо показанных значений 0% и 100%).

Я действительно не могу дать вам никаких советов о том, как лучше всего реализовать это, не зная причины или цели ваших анимаций - я не уверен, почему у вас так много элементов с уникальными идентификаторами с анимацией, применяемой таким образом , но я все же надеюсь, что это поможет :)

ПРИМЕЧАНИЕ. Посетите эту страницу, чтобы увидеть диаграмму совместимости браузеров, поддерживающих анимацию CSS.

1

Hayden McAfee 3 Апр 2014 в 05:26

Есть ли более простой или сокращенный способ сделать это?

2 ответа

Похожие вопросы

Новые вопросы

jquery