更新

Question

这个自动收报机工作正常，但有一个问题，即我想显示当前有效的段落，并希望隐藏当时的其他段落，这样，一次只显示当前的段落。我不想使用CSS设置特定的高度，因此它可以隐藏下面的段落。我想从Jquery做到这一点，即使有一个很长的文本，我也可以在屏幕上完全显示它。

任何帮助都将不胜感激。

这是我的fiddle。

HTML标记：

<div class="ticker">
    <div class="ticker-inner">
        <p class="active">A brand new game designed by <strong>Me</strong>.</p>
        <p>It’s fully free.</p>
    </div>
</div>

CSS：

<style>
   div.ticker p
   {
        color: black;
        font: 1em/3em Georgia,sans-serif;
        overflow: hidden;
   }
</style>

Jquery的：

<script>
var ticker = $('.ticker'),
    tickerInner = ticker.find('.ticker-inner'),
    tickerHeight = ticker.height(),
    tickerDelay = 3000,
    tickerSpeed = 3000;

setInterval(function()
{
    // Animate top -= the height of the ticker.
    tickerInner.animate({'top' : '-='+tickerHeight}, tickerSpeed, function()
    { 
        // Move the top, hidden p to the bottom.
        $(this).find('p').first().appendTo(tickerInner);
        // This isn't totally necessary, I just like to keep my animation numbers low.
        tickerInner.css('top', 0);
    });
}, tickerDelay); // Call this every 3000ms
</script>

Answer 1

你可以通过给.thicker一个高度来隐藏溢出：

div.ticker
{
    height: 3em;
    color: black;
    font: 1em/3em Georgia,sans-serif;
    overflow: hidden;
    border: 1px solid red; /* only added so you can see it's size */
}

Updated Fiddle

更新

根据您的评论，父母不能拥有固定的身高。

您可以通过先隐藏所有段落并仅显示第一个段落来实现。然后在间隔中，当你将div放在后面并在内部自动收报机中显示（新的）第一段时，你会隐藏它。

$('.ticker-inner p').hide(); /* hide all the paragraphs */
$('.ticker-inner p:first-child').show() /* show the first paragraph */

    var ticker = $('.ticker'),
     tickerInner = ticker.find('.ticker-inner'),
     tickerHeight = ticker.height(),
     tickerDelay = 3000,
     tickerSpeed = 3000;

    setInterval(function()
    {
        // Animate top -= the height of the ticker.
        tickerInner.animate({'top' : '-='+tickerHeight}, tickerSpeed, function()
        { 
            // Move the top, hidden p to the bottom.

            $(this).find('p').first().appendTo(tickerInner).hide(); /* put it to the back and hide it */
            $(this).find('p').first().show(); /* show the NEW first paragraph */
            // This isn't totally necessary, I just like to keep my animation numbers low.
            tickerInner.css('top', 0);
        });
    }, tickerDelay); // Call this every 3000ms

Updated Fiddle 2

Answer 2

我在非活动元素上使用了display: none。这是一个更新的fiddle

基本思想是从所有非活动元素中删除活动类，并添加active以显示活动元素。如果你想要更多元素，你必须稍微调整一下。

Answer 3

Check this fiddle : 

http://jsfiddle.net/2bayqtqf/

This is in unorder list.

你的Css

    #ticker {
            height: 67px;
            overflow: hidden;
        }
        #ticker li {
            height: 67px;

        }

你的Jquery

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

Html

<div class="birthday">
    <ul id="ticker">
        <li>A brand new game designed by <strong>Me</strong>.</li>
        <li><p>It’s fully free.</p></li>

    </ul>   
</div>

一次显示一个段落并隐藏其他段落 - 新闻自动收报机

3 个答案:

更新