Фейдерный тикер JQuery и PHP - PullRequest
Новая
       11

Фейдерный тикер JQuery и PHP

1 голос
/ 14 мая 2011

Этот (прекрасный) маленький скрипт, который я написал, должен плавно переходить через каждый элемент в списке <li></li>. Но ничего не происходит вообще. Что не так. 

<div id="twitnews" style="padding-left:20px; line-height:20px; float:left;">
        <?php getFeed("http://search.twitter.com/search.rss?q=golf+berkshire"); ?>
    </div>

<script type="text/javascript">
function fader() {

$(element).fadeIn(300, function(){
    $(element).delay(3000).fadeOut(300) });

        var element = $(element).next();

        fader();

}
$('#twitnews').children().hide();

var element = $('#twitnews').children().first();
fader();
        </script>

Любые идеи,

Marvelous

Ответы [ 4 ]

0 голосов
/ 14 мая 2011

Я думаю, что это очень простое решение.Единственная проблема заключается в использовании функции if, чтобы определить, является ли эта функция последней не функциональной.Возможно, кто-то знает, что с ним не так. 

 $('#twitnews li').hide();
    $('#twitnews li').first().fadeIn(300, function fade(){

        var visel = $('#twitnews li:visible');

        if((visel).is($('#twitnews li:last'))) {
            var nextel =  $('#twitnews li').first();
        }
        else {
        var nextel = $(visel).next();
        }


        $(visel).delay(3000).fadeOut(300, function(){

            $(nextel).fadeIn(300, function(){fade()});

            });

        });
0 голосов
/ 14 мая 2011

Я понятия не имею, почему ваш скрипт не работает, но я предлагаю вам немного другой подход.Замените весь свой JS-код на: 

$('#twitnews').children().each(function(){
  $(this).fadeIn(300, function() {
    $(this).delay(3000).fadeOut(300);
  });
});

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

0 голосов
/ 14 мая 2011

В исходном коде много ошибок, неправильные селекторы, глобальные переменные используются неправильно, и это идеально подходит для демонстрации плагинов. 

(function($){
// Make it a plugin
$.fn.twicker = function(settings) {
  // Default Variables
  var c = {time: 1300};
  // Override the variables with the settings if available.
  $.extend(c, settings);
  var $t = $(this);
  // If we find a ul, means we passed the container (a div that contains a ul)
  if($('ul', $t).length == 1) {
      $tw = $t;
      $t = $('li', $t).first();
  }

  // Do the animation.
  $t.delay(c.time).fadeIn(c.time, function() {
    // If there's a next sibling, do next.
    if($t.next().length != 0) {
        $t.next().twicker();
        $t.next().fadeOut();

    // If there's no sibling, it means we're at the end. Go back to first.
    } else {
        $tw.first().twicker();
        $t.first().fadeOut();
    }
    $t.fadeOut(c.time);
  });

};

})(jQuery);

$('#twitnews').twicker({time:2000});

Вы можете посмотреть это в прямом эфире на JSFiddle

0 голосов
/ 14 мая 2011

Попробуйте передать element в fader(). 

fader(element);

в конце вашего скрипта.

Также включайте element при определении fader()

function fader(element){
    //the rest of your function code here
}
...