Question

我有一个嵌套函数来显示/隐藏段落news-ticker-style。

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

具有嵌套效果循环的jquery动画

4 个答案: