JQuery NewsTicker пауза при наведении мыши

Question

JQuery NewsTicker пауза при наведении мыши

0

Я уже сделал newsTicker в jQuery, но вам нужно сделать паузу при наведении. То, что я сделал до сих пор, следующее:

файл.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();
});

Как я могу приостановить новости и показать в другом поле div, как показано здесь, когда мышь зависает?

запустите jsfiddle ссылку здесь

black 02 май 2014, в 00:16

Источник

1

пожалуйста, добавьте plunkr или jsfiddle. Спасибо
Robin Drexler 02 май 2014, в 00:20
0

@Robin Робин моя ссылка jsfiddle здесь
black 02 май 2014, в 06:56

Теги:

php

jquery

1 ответ

Ещё вопросы

пожалуйста, добавьте plunkr или jsfiddle. Спасибо

Jirka Kopřiva · Accepted Answer · 2014-05-01T21-35-00.000Z

Во-первых, внутри есть небольшая ошибка. Затем мы используем небольшой трюк.

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')
});

почти перепробовал все if и но, но на самом деле не смог этого сделать. мой код в jsfiddle можно посмотреть здесь