Question

我已经在jQuery中创建了一个newsTicker，但需要暂停一下。到目前为止我所做的是：

.php文件newsticker.php

<html>
<head> <script src="include jquery files"> </script></head>

    <div id="wrap">
        <div id="head" class="block"></div>

        <div id="content">
        <div id="info" class="block">
            <ul id="ticker">
                <li>
                    <span>Title Lorem Ipsum 1</span>
                    <a href="#">some text that will be shown here.need to pause the 
                                news on mouse hover and showing the news in different                   box</a>
                </li>

                <li>
                    <span>Title Lorem Ipsum 2</span>
                    <a href="#">some text that will be shown here.need to pause the 
                                news on mouse hover and showing the news in different box</a>
                </li>
            </ul>
        </div>
        </div>

    </div>
</body></html>

jQuery文件common.js

$(document).ready(function() {
    var ticker = function() {
        setTimeout(function(){
            $('#ticker li:first').animate({
                marginTop: '-120px'},
                800,
                function() {
                    $(this).detach().appendTo('ul#ticker').removeAttr('style');
                });
            ticker();
        }, 4000);
    };
    ticker();
});

当鼠标悬停时，如何暂停新闻并在here中找到的不同div框中显示？

运行jsfiddle链接here

Answer 1

首先，里面有一个小虫子。然后我们使用小技巧。

var ticker = function()
{
    setTimeout(function(){
        $('#ticker li:first:not(.stop)').animate( {marginTop: '-120px'}, 800, function()
        {
           var me = $(this);        

           me
            .clone(true)
            .appendTo('ul#ticker')
            .removeAttr('style')

           me.remove(); 
        });                                                
        ticker();
    }, 4000);
};

ticker();

// simply toggle class on hover
// animation will not run with `li` having this class

$('#ticker li').hover(function() {
    $(this).addClass('stop')
}, function() {
    $(this).removeClass('stop')
});

鼠标悬停时jQuery newsTicker暂停

1 个答案: