如何使用jQuery滑动和淡化div？

Question

我看了这个和这个,但它没有帮助.
我有一个新闻自动收报机.具有固定高度的列表具有上升并附加到列表末尾的项目.

编辑:一次只显示一个项目,第一个项目向上滑动并淡出下一个项目向上滑动并淡入

<ul id="ticker">
    <li>
        Sample note 1
    </li>
    <li>
        Sample note 2
    </li>
    <li>
        Sample note 3
    </li>
</ul>  

这是javascript代码:

function tick(){
    $('#ticker li:first').slideUP( function () { $(this).appendTo($('#ticker')).slideDown(); });
}
setInterval(function(){ tick () }, 2000);  

我想配置它,这样不仅可以向上滑动,而且可以淡出,在底部它会以滑动效果淡入.
我知道我应该使用动画效果.我尝试了很多次,但没有一个工作.请帮帮我.
谢谢!

Answer 1

一个简单的方法是:

function ticker(el, duration) {
    if (!el) {
        return false;
    }
    else {
        el = typeof el === 'object' ? el : $(el);
        duration = duration || 500;
        $(el).find('li').first().slideUp(duration, function() {
            $(this)
                .insertAfter($(this).nextAll('li').last())
                .fadeIn(duration, function(){
                    ticker(el, duration);
                });
        });
    }
}

您可以使用jQuery对象调用它:

ticker($('#ticker'));?????

JS小提琴演示.

或者使用具有指定持续时间(以毫秒为单位)的普通DOM节点:

ticker(document.getElementById('ticker'), 300);?????????

JS小提琴演示.

针对OP留下的评论(在下面的评论中):

此解决方案向上滑动第一个项目并在最后一个项目中淡入淡出.但我希望在第一件和下一件都褪色+滑动.列表的样式只是一次显示一个项目.

我提供这个,animate()用于动画列表元素的高度/不透明度:

function ticker(el, duration) {
    if (!el) {
        return false;
    }
    else {
        el = typeof el === 'object' ? el : $(el);
        duration = duration || 500;
        var first = el.find('li').first(),
            last = first.nextAll().last(),
            h = last.height();
        first.animate({
            height: 0,
            opacity: 0
        }, duration, function() {
            $(this).insertAfter(last).animate({
                height: h,
                opacity: 1
            }, duration, function() {
                ticker(el, duration);
            });
        });
    }
}

JS小提琴演示.

在OP的澄清之后编辑,以下内容:

function ticker(el, duration) {
    if (!el) {
        return false;
    }
    else {
        el = typeof el === 'object' ? el : $(el);
        duration = duration || 500;
        var lis = el.find('li').css('display', 'none');

        lis.first().fadeIn(duration, function(){
            $(this).slideUp(duration, function(){
                $(this).insertAfter(lis.last());
                ticker(el, duration);
            });
        });
    }
}

JS小提琴演示.

参考文献:

• animate().
• css().
• fadeIn().
• find().
• first().
• insertAfter().
• last().
• nextAll().
• slideUp().