0

编辑：为了明确目标，当文档准备好并且第一个动画开始时，最终代码应该干净地淡入淡出，代码有一个小的更新和一个演示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');
4

2 回答 2

0

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

于 2012-08-02T11:22:08.037 回答
0

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

看看这个 js fiddle。 http://jsfiddle.net/pushplaybang/aFSJk/3/

总结是：

  • 一起删除 setTimout

  • 同时运行一次 tick 函数来设置 setInterval 函数

  • 这会在动画开始之前停止延迟。

  • 将整个刻度函数包装在对fadeIn 的回调中

  • 在子元素的 css 中将不透明度设置为 0，以便它们仅由 tick 函数淡入
于 2012-08-02T13:59:32.340 回答