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