jQuery的嵌套效果循环动画

我有一个嵌套函数来显示/隐藏段落新闻股票样式。jQuery的嵌套效果循环动画

问题是，当循环开始（第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(); 
});

来源

2008-11-15 willoller

为什么会出现淡入淡出后跟着.animate（{opacity：100}）？他们获得的效果几乎相同 – 2008-11-15 01:49:03

它被用来延迟下一个动作10秒，而不是使用setTimeout或setInterval。 – 2008-11-15 18:39:43

问题是线9：

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

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

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

来源

2008-11-15 02:18:05 Owen

动画方法与不透明度无关。它仅用于控制在隐藏之前显示文本多长时间的延迟。 – 2008-11-16 17:21:32

这不是动画，这是问题，它将不透明度设置为100，这不是有效结果，不透明度是0和1之间的值。复制并测试其代码，然后将不透明度更改为1，如同我的示例中他会看到他提到的突然停止的动画将会消失。 – Owen 2008-11-16 23:28:43

尝试这种情况：


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

来源

2008-11-15 02:23:26 Andy

解决方案已经公布，但有评论：

如果一组元素将要立即隐藏，这是更快地创建一个“隐藏”的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>

来源

2008-11-16 00:34:56

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

来源

2008-11-16 17:18:32

jQuery的嵌套效果循环动画

回答

相关问题