ecサイトでページを読み込むと、横からheaderの中央に商品のイラスト(または画像)を3枚ほどフェードインさせたいです。
Apple社のMacのページの上部画像のようなイメージです。
以下の様に教えて頂いて実行して出来るようになりました。
lang
1<div id="products"> 2 <img src="gazou1.jpg" width="100"> 3 <img src="gazou2.jpg" width="100"> 4 <img src="gazou3.jpg" width="100"> 5</div>
lang
1#products { 2 margin:0 auto; 3 position: absolute; 4 opacity:0; 5 }
lang
1<script type="text/javascript"> 2 $(document).ready(function () { 3 var fireAt = 150, 4 duration = 280; 5 6 //初期状態の設定 7 $('#products').css({ 8 top: 20 + 'px', 9 left: $(window).width() + 'px', 10 opacity: 0 11 }); 12 //fireAt ミリ秒後に 移動とfadeIn開始. duration ミリ秒後に完了。 13 setTimeout(function () { 14 $('#products').animate({ 15 left: ($(window).width() * 0.5 - 300) + 'px', 16 opacity: 1 17 }, duration); 18 }, fireAt); 19 }); 20</script>
しかし、この```lang-html
<div id="products"> ``` でマークアップした上の箇所に画像など他の要素(高さ100px)を配置して、script内を```lang-javascript top: 100 + 'px', ```のようにしても表示されてきません。
どのような部分を修正すれば良いのでしょうか?
よろしくお願い致します。
追記;
*上記スクリプトをSafariで確認するとフェードインされていますが、GoogleChrome、Firefoxだと画像も何も表示されません。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/05/21 06:11
2015/05/21 06:28
2015/05/21 06:37
2015/05/21 07:02
2015/05/21 07:02
2015/05/21 07:08
2015/05/21 07:17
2015/05/21 07:30
2015/05/21 07:39
2015/05/21 07:44