Question

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

已编辑：一次只显示一件物品，第一件物品向上滑动并淡出，下一件物品向上滑动并淡入

<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 Fiddle demo

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

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

JS Fiddle demo

回应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 Fiddle demo

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 Fiddle demo

参考文献：

Answer 2

在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;
}

Answer 3

我推荐此解决方案：

html：

<div class="ticker-1">
<div class="ticker-inner-1">
<p class="ticker-text-1 active"><b>Newsletter:</b> 1/4</p>
<p class="ticker-text-1"><b>Newsletter:</b> 2/4</p>
<p class="ticker-text-1"><b>Newsletter:</b> 3/4</p>
<p class="ticker-text-1"><b>Newsletter:</b> 4/5</p>
</div>
</div>

<div class="ticker-2">
<div class="ticker-inner-2">
<p class="ticker-text-2">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p class="ticker-text-2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="ticker-text-2">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class="ticker-text-2">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

javascript：

$(document).ready(function(){
$.newsLetter = function(){
    $('.ticker-inner-1 p').hide();
    $('.ticker-inner-2 p').hide();
    $('.ticker-inner-1 p:first-child').show();
    $('.ticker-inner-2 p:first-child').show();
    var tickerOne = $('.ticker-1'),
        tickerTwo = $('.ticker-2'),
        innerOne  = tickerOne.find('.ticker-inner-1'),
        innerTwo  = tickerTwo.find('.ticker-inner-2'),
        heightOne = tickerOne.height(),
        heightTwo = tickerTwo.height(),
        speedAll  = 6000;
    setInterval(function(){
        innerOne.animate({'top' : '-='+heightOne}, speedAll, function(){
            $(this).find('p').first().appendTo(innerOne).hide();
            $(this).find('p').first().show();
            innerOne.css('top', 0);
        });
        innerTwo.animate({'top' : '-='+heightTwo}, speedAll, function(){
            $(this).find('p').first().appendTo(innerTwo).hide();
            $(this).find('p').first().fadeIn("slow").show();
            innerTwo.css('top', 0);
        });
    },
        speedAll
    );
}
});

css：

div.ticker-1 {
    width: 100%;
}

p.ticker-text-1 {
    font-family: 'Arial';
    font-size: 13px;
    line-height: 2;
    text-align: left;
}

div.ticker-2 {
    width: 100%;
    padding: 10px 0 10px 0;
    border-bottom: 1px dashed #bfbdbe;
    border-top: 1px dashed #bfbdbe;
}

p.ticker-text-2 {
    font-family: 'Arial';
    font-size: 13px;
    line-height: 2;
    text-align: justify;
}

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

3 个答案: