JQuery анимация с циклом вложенных эффектов

Question

У меня есть вложенная функция для отображения / скрытия абзацев в стиле новостных тикеров.

Проблема в том, что когда цикл начинается заново (строка 4), эффекты непрозрачности перестают работать правильно, поэтому абзацы появляются внезапно.

Кто-нибудь из мастеров jquery знает об этом? Я делаю это слишком сложно?

$('#special-ticker p').hide();
var a=0;
function outer() {
    function inner() {
        if(a===$('#special-ticker p').length) { a = 0; }
        $('#special-ticker p').
        eq(a).
        fadeIn(800, function(){
            $(this).animate({opacity:100},10000,null,function(){
                $(this).hide(800,function(){
                    a++;
                    outer();
                });
            });
        });
    }
    return inner();
}
$(function(){ 
    outer(); 
});

Answer 1

проблема в строке 9:

$(this).animate({opacity:100},10000,null,function(){
//...

непрозрачность должна быть "1" (непрозрачность - значение между 0 и 1)

$(this).animate({ opacity : 1 }, 10000, null, function() {

Answer 2

Небольшая доработка кода для повторного создания экземпляров jQuery с одинаковыми селекторами. Я думаю, что это тоже немного легче читать.

var jS = $('#special-ticker p');
// jS.hide(); // not needed if css hides elements initially
var i = 0;

function do_ticker() {
  jS.eq(i).fadeIn(800, function() {
    var me = $(this);     
    setTimeout(function() { me.hide(800, 
      function() { 
        i = ++i % jS.length;
        do_ticker();
      });
    },1000); // setTimeout
  });
};
do_ticker();

Answer 3

Решение опубликовано, но один комментарий:

Если группа элементов будет немедленно скрыта, быстрее создать «скрытый» класс CSS, а затем назначить его этим элементам. Сохраняет немного кода JavaScript, но также гарантирует, что скрытые элементы не будут кратко мигать на экране.

<style type="text/css" media="screen">
.hidden { display: none; }
</style>

<p>Show me</p>
<p class="big hidden">Use javascript to show me later.</p>

Answer 4

Попробуйте это:

            newsticker = function (selector) {
                $(selector).hide();
                var i = $(selector).length - 1;
                var toggle = function() {
                    $(selector).eq(i).fadeOut("slow", function() {
                        i = ++i % $(selector).length;
                        $(selector).eq(i).fadeIn("slow", function() {
                            setTimeout(toggle, 1000)
                        });

                    });
                };          
                toggle();
            };

и инициализируйте его следующим образом:

            new newsticker("#special-ticker p");