Простой ярлык JQuery Fade

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

  • Story 1
  • Story 2
  • Story 3
  • Story 4
  • Story 5
  • Я посмотрел на следующую функцию, но я не знаю, как заставить ее показать элементы, которые я хочу. Поэтому я прошу что-то очень простое. Все, что ему нужно, – это интервал, который исчезает и исчезает в цикле.

    Я сделал очень простой фейдер, очень легкий. использовал его для изображений, но изменил его для 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

     
    Story 1
    Story 2
    Story 3

    CSS

     #aniHolder {width:640px; height:480px; } #aniHolder div {position:absolute; width:640px; height:480px; display:none;} 

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

    Непроверенные. Это просто переназначает fade out / in, которые соединены вместе, на следующем элементе после завершения текущего.

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

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