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

- willoller

---

为什么要使用fadeIn，然后再跟上.animate({opacity:100})呢？它们实现的效果几乎是相同的。 - Eran Galperin

它被用来延迟下一步操作10秒钟，而不是使用setTimeout或setInterval。 - Kevin Gorski

Answer 1

问题出现在第9行：

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

不透明度应该是“1”（不透明度的值介于0和1之间）

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

- Owen

---

animate方法与不透明度无关，它仅用作延迟，以控制在隐藏文本之前显示文本的时间。 - Jason Moore

不是动画的问题，而是将不透明度设置为100，这不是有效的结果，不透明度是0到1之间的值。按原样复制并测试他的代码，然后像我示例中一样将不透明度更改为1，你会发现他提到的突然停止动画的问题会消失。 - Owen

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

- Andy

---

不错的解决方案。给楼主的建议是，如果你真的想保留擦除效果，只需将第一个 "fadeOut" 改为 "hide" 即可。 - Jason Moore

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>

- Jason Moore

---

好的观点。如果您正在使用这种技术，应考虑使用JavaScript来创建CSS（以实现优雅降级）。 - willoller

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

- Jason Moore