Question

编辑：为了使目标明确，最终当文档准备好并且第一个动画开始时，自动收报机应该干净利落地进行淡入淡出，对代码和演示进行了一些小的更新http://jsfiddle.net/pushplaybang/aFSJk/尽管开始是仍然有点波动它的改善

我正在为推荐书制作一个自动收录器，除了我试图在页面加载时尝试使用setTimout淡化自动收报机，同时使用setTimout停止第一项显示时页面正在加载，但不是像我预期的那样轻轻地褪色，而是突然陷入了原位。

有人能纠正我这样做的方式吗？是否有更好的方法让它淡入？

请注意，以下内容将包含在文档就绪函数中，并且在随附的CSS中，容器最初设置为display：none。

function bangingTicker(container,element) {

    var tickContainer = $(container);

    setTimeout(function(){
    tickContainer.fadeIn(1000);
    },6200);

        function tick(){
            var tickElem = tickContainer.children(element);
            tickElem.eq(1).siblings().animate({
                opacity: 0
                },400, function() {
                    tickContainer.stop(true,true).delay(10).animate({
                    'margin-top': 120
                    },0,function() {
                        tickContainer.delay(100).animate({
                        'margin-top': 20
                        },8000);
                    });
                        tickElem.first().appendTo(tickContainer);
                        tickElem.eq(1).delay(200).animate({
                            opacity: 1
                        },400);
                    });

        }

        setInterval(function(){ tick () }, 6000);

}

bangingTicker('#testi_ticker','li');

Answer 1

试试这个jsfiddle。这是你需要的吗？

Answer 2

今天工作了一段时间之后我已经按照我想要的方式工作了，虽然我仍然觉得代码可以改进 - 我希望尽可能少依赖css / html但是它工作，看起来也很棒。

看看这个小提琴。 http://jsfiddle.net/pushplaybang/aFSJk/3/

摘要是：

将setTimout全部放在一起
同时运行tick函数设置setInterval函数
这会在动画开始前停止延迟。
将回调中的整个tick函数包装到fadeIn
在子元素的css中将不透明度设置为0，因此它们仅通过tick函数淡入

jQuery新闻自动收报机 - 顺利开始

2 个答案: