Question

我正在尝试为垂直滚动条创建一个非常简短的代码，到目前为止这是我的代码并且它工作正常：

    $(document).ready(function(){

        var the_first = $('.vticker ul li:eq(0)');      
        var li1 = $('.vticker ul li:eq(0)').outerHeight();
        var li2 = $('.vticker ul li:eq(1)').outerHeight();
        var li3 = $('.vticker ul li:eq(2)').outerHeight();      
        var three = li1 + li2 + li3 ;

        $('.vticker').height(three);

        //Animate
        setInterval( function(){    
            var the_height = the_first.outerHeight();
            $('.vticker ul').animate({ marginTop: '-=' + the_height + 'px'}, 900, function(){
                the_first.clone().insertAfter('.vticker ul li:last');               
                the_first = the_first.next();               
            });
        }, 2000);

    });
</script>

唯一的问题是，如果您使用inspect元素查看DOM，您将看到我每2秒克隆它并创建一个新的li

我想清除李没有出现。

HTML + CSS：

<style>
    .vticker { width:300px; overflow:hidden; background:#eee; border:8px solid #fff; box-shadow:0 0 4px #bbb; }
    .vticker ul { padding: 0; margin: 0; }
    .vticker ul li { font-size:12px; border-bottom:1px dashed #bbb; list-style:none; font-family:'Arial'; padding:10px; }
    .vt_title { color:#f44837; font-weight: bold; padding:8px 0;  }
    .vt_content { color:#555555; }
    .vt_date { padding:4px 0; color:#555555; font-size:10px; font-weight:bold; }
</style>

<div class="vticker">
        <ul>
            <li>
                <div class="vt_title">City Room: New York Today: ‘The Wintry Mix Has Commenced’ </div>
                <div class="vt_content">indicating whether to place the animation in the effects queue. If false, the animation will begin immediately1.7 </div>
                <div class="vt_date">02/02/2015</div>
            </li>
            <li>
                <div class="vt_title">Australian Leader Pledges to Abandon Unpopular Policies </div>
                <div class="vt_content">In a speech, Prime Minister Tony Abbott, who has been in office less than two years, said he would refocus on the economy and consult more with his party colleagues.</div>
                <div class="vt_date">02/02/2015</div>
            </li>
            <li>
                <div class="vt_title">Latest News: New England Patriots, Katy Perry and Groundhog Day.</div>
                <div class="vt_content">indicating whether to place the animation in the effects queue. If false, the animation will begin immediately1.7 </div>
                <div class="vt_date">01/02/2015</div>
            </li>
            <li>
                <div class="vt_title">Lorem ipsum dolor sit amet, consectetur adipisicing.</div>
                <div class="vt_content">indicating whether to place the animation in the effects queue. If false, the animation will begin immediately1.7 </div>
                <div class="vt_date">01/02/2015</div>
            </li>
        </ul>
    </div>

Answer 1

会是这样的吗？

$(document).ready(function() {
    setInterval( function(){
        $('ul li:first').fadeOut(1000, function() {
            $('ul li:first').insertAfter('ul li:last');
            $(this).fadeIn(1000);
        });
        
    }, 2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ul>

jquery垂直自动收报机克隆和清除

1 个答案: