Fader-Ticker JQuery和PHP

Fader-Ticker JQuery和PHP,php,jquery,ticker,Php,Jquery,Ticker,我写的这个(可爱的)小脚本应该会在列表中的每个元素中逐渐消失。但什么也没发生。怎么了 <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="

我写的这个(可爱的)小脚本应该会在列表中的每个元素中逐渐消失。但什么也没发生。怎么了

<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>

函数推子(){
$(元素).fadeIn(300,函数(){
$(元素)。延迟(3000)。衰减(300});
var element=$(element.next();
音量控制器();
}
$('#twitnews').children().hide();
var元素=$('#twitnews').children().first();
音量控制器();
任何想法


奇妙的

尝试将
元素
传递到
fader()

在脚本的末尾

定义
fader()时还包括
element


我不知道为什么你的脚本不起作用,但我建议你采取一种稍微不同的方法。将所有JS代码替换为:

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

注意:我只是重新整理了您的代码,以消除全局变量、奇怪的元素遍历和递归调用。我没有接触动画-但是你应该能够很容易地用新代码找到bug。

原始代码中有很多错误,选择器不正确,全局变量没有正确使用,这对于插件演示来说是完美的

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

你可以在网上观看这个节目,我认为这是一个非常简单的解决方案。唯一的问题是使用if函数来确定这是否是最后一个li不起作用。也许有人知道它出了什么问题

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

            });

        });

看起来你的函数运行得很早,这会使它们一起消失——当然,这也是你最初的脚本所做的。你到底想完成什么?我只是整理了一下你的剧本。非常感谢。这与我的想法非常相似,但我相信我的想法更简单。我会把它贴在这里。让我知道你的想法。这很简单;但关键是:它是可重用的。如果你想剥离插件的功能并将其转化为一个功能,它看起来像是更少的代码,但从长远来看是不可重用的。记住,所有开发人员的目标都是:干巴巴的(不要重复你自己)不要回答你自己的问题。如果你需要澄清一些事情,编辑你的原始问题。
(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});
 $('#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()});

            });

        });