jquery - 带有嵌套效果循环的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

试试这个：

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

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

对代码进行了轻微的修改，以保存使用相同选择器重复创建 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();