jquery - 如何使用 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);

我想对其进行配置，使其不仅向上滑动，而且还淡出，并在底部以滑动效果淡入。
我知道我应该使用动画效果。我尝试了很多次，但都没有奏效。请帮助我。
谢谢！

score 5 · Accepted Answer

一个简单的方法是：

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 小提琴演示。

参考：

score 1 · Accepted Answer

在http://jsfiddle.net/zLe2B/19/尝试我的解决方案

html:

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

JavaScript：

    $(document).ready(function(){
    function tick(timeout){
        var first = $('#ticker li:first');
        var next = first.next();

        first.children('span').fadeOut(timeout);
        first.slideUp(timeout, function () {      
             first.appendTo($('#ticker'));                
        });

        next.slideDown(timeout);
        next.children('span').hide().fadeIn(timeout);
    }
    setInterval(function(){tick(1000)}, 2000);
});

CSS：

ul, li, span {
    display: block
}

#ticker li {
    height: 20px;
}

#ticker {
    height: 20px;
    overflow: hidden;
}

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

2 回答 2

Related

Reference