Исчезающий баннер как текст с помощью jQuery

Question

У меня есть текст заголовка, который я хочу добавить в поле. После этого под ним должен появиться субтитр. Как только оба становятся видимыми, они должны исчезнуть, и следующий набор должен появиться таким же образом.

Это я создал, однако у меня есть сомнения в том, насколько хорошо он работает, то есть, если для браузера требуется много ресурсов процессора. Одной из моих проблем является также глубина рекурсии Javascript.

У меня есть следующий код (который я также включил в jsfiddle вместе с CSS и HTML http://jsfiddle.net/ukewY/1/)

var no = 3;

function fadeText(id) {
  // Fade in the text
  $("#text" + id).animate({
    opacity: 1,
    left: '+=50'
  }, 5000, function() {
    // Upion completion, fade in subtext
    $("#subtext" + id).animate({
      opacity: 1,
    }, 5000, function() {
      // Upon completion, fade the text out and move it back
      $("#subtext" + id).animate({
        opacity: 0, 
      }, 1000, function() {
        $("#text" + id).animate({
          opacity: 0,
          left: '+=200'
        }, 3000, function() {
          // Yet again upon completion, move the text back 
          $("#text" + id).css("left", "19%");
          $("#subtext" + id).css("left", "10%")
          fadeText((id % no) + 1);
        });
      });
    });
  });
}

$(document).ready(function() {
  fadeText(1);
});

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

PS. Так как это для баннера для веб-сайта, я не беспокоюсь о том, что id будет большим, поскольку люди, вероятно, с тех пор продвинулись.

Answer 1

Рекурсия мне подходит, но я заметил еще несколько вещей:

• Возможно, вы хотите динамически читать количество заголовков, а не указывать их в верхней частискрипт.
• Вы используете одни и те же селекторы $ ("# text" + id) и $ ("# subtext" + id) дважды в каждом заголовке.Вы должны сделать это только один раз и назначить его переменной.Это означает, что у вас есть только один вызов функции, а не два.
• Возможно, вы захотите использовать селектор eq (), чтобы устранить необходимость в $ ("text" + id) и сделать его более аккуратным
• Существует пара карт данных, которые вы передаете animate () и которые заканчиваются запятыми, даже если есть только 1 значение (в частности, "{opacity: 0,}").Это вызовет проблемы в некоторых браузерах.
• Я не уверен на 100%, но я думаю, что вызов функции изнутри сам по себе плох, вам следует использовать setTimeout (и использовать анонимную функцию, если вам нужно передатьиспользуйте некоторые параметры, чтобы избежать этого, используя eval ())
• Я знаю, вы сказали, что это не имеет значения, но слишком большое значение id может произойти, если пользователь просто оставляет вашу страницу открытой (например, отвечает на звонок, затем долженвыпускать).Они не должны возвращаться к ошибке.
• Вы можете использовать $ (DO STUFF) вместо $ (document) .ready (DO STUFF)

Я взял машину из нихи позволил настроить ваш код следующим образом:

function fadeText() {
    thistext = $text.eq(titleid);
    thissubtext = $subtext.eq(titleid);
    thistext.animate({
        opacity: 1,
        left: '+=50'
    }, 5000, function () {
        thissubtext.animate({
            opacity: 1
        }, 5000, function () {
            thissubtext.animate({
                opacity: 0
            }, 1000, function () {
                thistext.animate({
                    opacity: 0,
                    left: '+=200'
                }, 3000, function () {
                    thistext.css("left", "19%");
                    thissubtext.css("left", "20%");
                    if (titleid != $text.length - 1) {
                        titleid++;
                    } else {
                        titleid = 0;
                    }
                    setTimeout(fadeText, 0);
                });
            });
        });
    });
}

var titleid=0;

$(function () {
  $text = $("span.floating-text");
  $subtext = $("span.floating-subtext");
  fadeText();
});