Функция обратного вызова jquery запускает последнюю строку перед циклом

0

Я пытаюсь создать функцию обратного вызова, которая меняет мою анимацию слов. Я создал функцию jquery, которая затухает в каждом слове с определенным цветом. Я бы хотел, чтобы эта маленькая анимация зациклилась правильно. Проблема в том, что как только я вызываю функцию, которую она не запускает с самого начала, она снова повторяет последний код. Таким образом, в этом примере вы увидите ключевое слово многоцелевое два раза.

Нажмите здесь, чтобы увидеть временный образец того, что я имею в виду.

Это мой код jquery:

function wordfade(){
        $('#msg').fadeIn(2000, function() {
            $('#msg').html("Sustainable").css("color", "#3AE44E").delay(800).fadeOut(2000, function() {
                $('#msg').fadeIn(2000).html("Eye Catching").css("color", "#F18D0B").delay(800).fadeOut(2000, function(){
                    $('#msg').fadeIn(2000).html("Modern Design").css("color", "#0B8DF1").delay(800).fadeOut(2000, function(){
                        $('#msg').fadeIn(2000).html("Energy Efficient").css("color", "#AD0BF1").delay(800).fadeOut(2000, function(){
                            $('#msg').fadeIn(2000).html("Restaurant").css("color", "#F10B0B").delay(800).fadeOut(2000, function(){
                                $('#msg').fadeIn(2000).html("Retail & Pop-Up").css("color", "#C39813").delay(800).fadeOut(2000, function(){
                                    $('#msg').fadeIn(2000).html("Event Space").css("color", "#4FB186").delay(800).fadeOut(2000, function(){
                                        $('#msg').fadeIn(2000).html("Bar & Lounge").css("color", "#F10BA3").delay(800).fadeOut(2000, function(){
                                            $('#msg').fadeIn(2000).html("Residential").css("color", "#C7C7C7").delay(800).fadeOut(2000, function(){
                                                $('#msg').fadeIn(2000).html("Hotel & Lodging").css("color", "#565457").delay(800).fadeOut(2000, function(){
                                                    $('#msg').fadeIn(2000).html("Multi-Purpose").css("color", "#F1880B").delay(800).fadeOut(2000, wordfade);
                                                })
                                            })
                                        })
                                    })
                                })
                            })
                        })
                    })
                })
            })
        });
    }
    wordfade();
  • 0
    Это как-то напомнило мне об искусстве ASCII .. :-)
  • 2
    Я пытался войти в OMG но мой комментарий был слишком коротким.
Показать ещё 5 комментариев
Теги:
loops
jquery-callback

4 ответа

6
Лучший ответ

Первая строка вашей функции выполняет .fadeIn() и ждет, пока это не закончится до установки .html() на следующей строке. Таким образом, второй раз он исчезает, пока содержание html остается окончательным. Просто объедините первые две строки, чтобы больше походить на другие линии, и она будет работать:

function wordfade() {
    $('#msg').fadeIn(2000).html("Sustainable").css("color", "#3AE44E").delay(800).fadeOut(2000, function () {
        $('#msg').fadeIn(2000).html("Eye Catching").css("color", "#F18D0B").delay(800).fadeOut(2000, function () {
         // etc.

Демо: http://jsfiddle.net/PNDg4/

И затем подумайте о том, чтобы переписать все это, чтобы избежать так много вложенных обратных вызовов:

var words = [
    { word : "Sustainable", color : "#3AE44E" },
    { word : "Eye Catching", color : "#F18D0B" },
    { word : "Modern Design", color : "#0B8DF1" },
    { word : "Energy Efficient", color : "#AD0BF1" },
    /* etc */],
    current = -1;

function wordfade() {
    current = (current + 1) % words.length;
    $("#msg").html(words[current].word)
             .css("color", words[current].color)
             .fadeIn(2000)
             .delay(800)
             .fadeOut(2000, wordfade);
}
wordfade();

Демо: http://jsfiddle.net/PNDg4/1/

Поделиться
  • 0
    Я просто использовал ваш код, и он отлично работает. Очевидно, это намного яснее, чем у меня. Я хочу понять это, так как это может быть полезно для изучения. Часть кода, которую я не понимаю, является текущей и ее номером. ТАК я не получаю ток = -1; и current = (current + 1)% words.length; Не могли бы вы объяснить это?
  • 0
    По почте на почту :)
Показать ещё 1 комментарий
3

Я чувствовал себя великодушным...

var index = 0;
var words = [
    { text: "Sustainable", color: "#3AE44E" },
    { text: "Eye Catching", color: "#F18D0B" },
    { text: "Modern Design", color: "#0B8DF1" },
    { text: "Energy Efficient", color: "#AD0BF1" },
    { text: "Restaurant", color:  "#F10B0B" },
    { text: "Retail & Pop-Up", color:  "#C39813" },
    { text: "Event Space", color:  "#4FB186" },
    { text: "Bar & Lounge", color:  "#F10BA3" },
    { text: "Residential", color:  "#C7C7C7" },
    { text: "Hotel & Lodging", color:  "#565457" },
    { text: "Multi-Purpose", color:  "#F1880B" }];

function wordfade() {
    $("#msg")
        .html(words[index].text)
        .css("color", words[index].color)
        .fadeIn(2000).delay(800).fadeOut(2000, function() {
            index = ++index % words.length;
            wordfade();
        });
}

wordfade();

Работа jsFiddle...

Поделиться
  • 1
    +1 только для того, чтобы довести вас до 7777 респ. (И поскольку у вас мог быть принятый ответ, если бы вы печатали немного быстрее - я предполагаю, что мы писали наши ответы одновременно.)
  • 0
    @nnnnnn лол - спасибо :)
1

Это потому, что он начинается с $ ('# msg'). FadeIn (2000, function(), поэтому он исчезает в последнем содержимом. Вы должны комбинировать $ ('# msg'). FadeIn (2000, function() со вторым строка (havent проверила ее)

Поделиться
1

Проблема заключается в том, что начало вашей функции исчезает в содержимом #msg

Последнее действие функции - установить #msg в "Многоцелевой", и начало вашей функции будет исчезать в содержимом. Просто начните свою функцию, установите #msg и затем затухайте.

Поделиться
  • 0
    Я просто раздвоил твою скрипку, чтобы показать, о чем я говорю. jsfiddle.net/5ubj4/1

Ещё вопросы

Сообщество Overcoder
Наверх
Меню