2008年5月18日 星期日

time, setTimeout, setInterval, fadeOut, callback, 跑馬燈

  1. 自己用setTimeout 做interval 比較好, 爆掉一次就讓他爆掉, 別用setInterval錯了還一直跑,利用 setTimeout 自己call 自己
  2. fadeOut後, 才做替換html的hide動作, 需要將他放到callback 裡, 不然html hide和fadeOut是同步的這樣會直接看到消失而已
  3. 可以將跑馬燈需要的option 藏起來, 像這樣藏在hidden_forum裡, 用size()可以知道裡面包含幾個

<div id='hidden_forum' style='display:none'>
<div>abc</div>
<div>def</div>
</div>

<script type="text/javascript">
var index = 0;
var shuffler;
var news;
var max_news;

function replace_news(){
index = index % max_news
news = $('#hidden_forum div:eq('+index+')').clone();
shuffler.fadeOut('slow', function() {shuffler.html(news.html()).hide().fadeIn('slow') });
index++;
if(max_news > 1) { var dummy = setTimeout(replace_news, 5000); }
}

$(function(){
max_news = $('#hidden_forum div').size();

if(max_news > 0){
shuffler = $('div.news div');
replace_news();
}
});
</script>

沒有留言: