Простой тикер JQuery Fade - PullRequest
Новая
       7

Простой тикер JQuery Fade

1 голос
/ 24 марта 2011

Я посмотрел на несколько тикеров, и они все далеко от веса. Мне нужен очень простой тикер jQuery для fadeIn () fadeOut () для списка элементов для отображения заголовков. 

<li>Story 1</li>
<li>Story 2</li>
<li>Story 3</li>
<li>Story 4</li>
<li>Story 5</li>

Я посмотрел на следующую функцию, но я не знаю, как заставить ее показывать элементы, которые я хочу. Так что я за чем-то очень простым. Все, что ему нужно, это интервал постепенного исчезновения и постепенного появления петли.

Ответы [ 4 ]

3 голосов
/ 24 марта 2011

Я сделал очень простой фейдер, очень легкий вес. использовал его для изображений, но изменил его для divs:

Сценарий 

var aniSpd01 = 1000;
var fadeSpd01 = 1000;

$(function() {
    var startIndex = 0;
    var endIndex = $('#aniHolder div').length;
    $('#aniHolder div:first').fadeIn(fadeSpd01);

    window.setInterval(function() {
    $('#aniHolder div:eq(' + startIndex + ')').delay(fadeSpd01).fadeOut(fadeSpd01);
        startIndex++;
        $('#aniHolder div:eq(' + startIndex + ')').fadeIn(fadeSpd01);

        if (endIndex == startIndex) startIndex = 0;
    }, aniSpd01);
});

HTML 

<div id="aniHolder">
    <div>Story 1</div>
    <div>Story 2</div>
    <div>Story 3</div>
</div>

CSS 

#aniHolder {width:640px; height:480px; }
#aniHolder div {position:absolute; width:640px; height:480px; display:none;}
0 голосов
/ 09 декабря 2011

jQuery WebTicker также является очень хорошей альтернативой для вращения текстовых ссылок; давая вам полный контроль над направлением вращения и скоростью; это также позволяет гибкость цветов и размеров с помощью CSS. Тикер позволяет вращение без остановки, и как только вы доберетесь до последнего предмета, сразу начнется первый.

0 голосов
/ 24 марта 2011

непроверенная. Это просто перенесет затухание / вхождение, которые соединены вместе, на следующий элемент после завершения текущего. 

function fadeTicker( $collection, $elem, interval )
{
     var $next = $collection.eq(($collection.index($elem) + 1) % $collection.length));
     $(elem).fadeOut( function() {
          $(next).fadeIn( function() {
               setTimeout( function() {
                       fadeTicker( $collection, $next, interval );
                   },
                   interval
               );
          });
     );
);

Используется как: 

$(function() {
    fadeTicker( $('li'), $('li:first'), 5000 );
}
0 голосов
/ 24 марта 2011

Попробуйте плагин jquery Cycle ; Я использовал его для создания простого набора вращающихся текстовых ссылок, есть версия "lite-min", которая делает ее красивой и удобной, если вам нужны только базовые функции и эффекты.

...