Несколько независимых тикеров jquery на одной странице

Question

Несколько независимых тикеров jquery на одной странице

0

Я намерен использовать эту концепцию простого тикера в моем проекте, показанную здесь на jsfiddle.

Этот тикер в порядке, но я намерен использовать кучу (это) тикеров на одной странице сразу, так как они будут автоматически генерироваться PHP.

На одной странице может быть 3 этих тикера сразу, вплоть до 20, с разным содержанием, конечно.

Как я могу заставить их всех работать, "двигаясь" отлично, как первый, используя признак HTML?

ps: пауза при добавлении зависания будет таким плюсом, спасибо!

JS

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

HTML

<div><ul class="ticker" id="ticker">
    <li>
        One.
    </li>
    <li>
        Two.
    </li>
    </ul></div>

<div><ul class="ticker" id="ticker1">
    <li>
        3.
    </li>
    <li>
        4.
    </li>
    </ul></div>

<div><ul class="ticker" id="ticker2">
    <li>
        Five.
    </li>
    <li>
        Six.
    </li>
    </ul></div>

CSS

.ticker {
    height: 40px;
    overflow: hidden;
    background:#c1c1c1;
}
.ticker li {
    height: 40px;
}

Joem 21 фев. 2014, в 19:31

Источник

Теги:

jquery

2 ответа

0

Мне нравится oGeez ответить лучше, чем мой собственный (это действительно должен быть комментарий, а не редактирование моего ответа, как это, но у меня нет возможности комментировать...).

Я хотел бы отметить, однако, что вы должны иметь возможность добавлять функциональные возможности для приостановки элементов, когда мышь над ними, используя метод jquery hover(), чтобы добавить класс к элементу, который замалчивается. http://api.jquery.com/hover/ Оттуда вы просто не включаете тикеры с приостановленным классом в список тиков, которые вы обновите.

function tick(){
    $('.ticker').not(".paused").each(function(){
        $(this).find('li:first').slideUp(function () {
            $ticker = $(this).closest('.ticker');
            $(this).appendTo($ticker).slideDown();
        });
    });
}
setInterval(tick, 5000);

$(".ticker").hover(     
    (function () {          
        $(this).addClass("paused")      
    }),      
    (function () {          
        $(this).removeClass("paused")      
    }) 
);

Я обновил свою вилку вашего jsfiddle, чтобы отразить ответ oGeez с возможностью паузы, замалчиваясь над тикером. http://jsfiddle.net/4MgZv/3/

user3334690 21 фев. 2014, в 16:59

Ещё вопросы

George · Accepted Answer · 2014-02-21T16-33-00.000Z

Вы ориентируетесь только на первый li в наборе, на весь набор. Вам нужно пройти через каждый тикер, а затем вы будете анимацией на каждом li:first. Добавьте его к closest() тиккеру, и вы хороши:

function tick(){
    $('.ticker').each(function(){
        $(this).find('li:first').slideUp(function () {
            $ticker = $(this).closest('.ticker');
            $(this).appendTo($ticker).slideDown();
        });
    });
}
setInterval(tick, 5000);

JSFiddle

THX oGeez !!!! ps: если вы заботитесь, возможна ли здесь какая-то «пауза при наведении»?