スライドショーをjQueryのanimateで作成しました。
DIV#top_head内にimgタグを羅列して順番に右端から画像が入ってくる感じの物を下記のコードで作成しました。
ChromeやIEでは想定通り動作するのですが、Firefoxだけ上部50px程度でアニメーションが動き、右端から左端へアニメーションが終わった時点で一気に画像が切り替わるような動きをします。
画像は4枚とも800x400で250kb前後のそれほどは大きくない画像ですので画像が重いとかでは無いと思っています。
何か解決出来るようなヒントはありませんでしょうか?
lang
1<div id="top_head"> 2 <img src="img/001.jpg" id="img1" alt="" width="800" > 3 <img src="img/002.jpg" id="img2" alt="" width="800" > 4 <img src="img/003.jpg" id="img3" alt="" width="800" > 5 <img src="img/004.jpg" id="img4" alt="" width="800" > 6</div>
lang
1$('#top_head img:gt(0)').hide(); 2 setInterval(function () { 3 $('#top_head :first-child').css('z-index', '1'); 4 $('#top_head :first-child').next('img').css({'left': '800px', 'top': '0px', 'z-index': '999', 'display': 'block'}).animate({'left': '0px'}, {duration: 500, easing: 'linear'}); 5 $('#top_head :first-child').appendTo('#top_head'); 6 }, 8000);
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/01/22 01:00