Q&A#jQueryを使って複数画像をフェードインフェードアウトで切替表示しようと下のコードを書いています。
html
1 <article class="mainvisual"> 2 <div id="slide"> 3 <img src="./images/main_visual-min.jpg" alt="メインビジュアル"> 4 <img src="./images/main_visual-min-2.jpg" alt="メインビジュアル2"> 5 <img src="./images/main_visual-min-3.jpg" alt="メインビジュアル3"> 6 </div> 7 <h2>素材の味を極める</h2> 8 </article>
CSS
1.mainvisual{ 2 position: relative; 3} 4 5#slide img{ 6 height: 700px; 7 object-fit: cover; 8 object-position: 0 65%; 9 -webkit-clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%); 10 clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%); 11} 12 13.mainvisual h2{ 14 position: absolute; 15 left: 4%; 16 transform: translateY(-290%); 17 font-size: 4vw; 18 color: #fff; 19} 20
jQuery
1 2 $(document).ready(function(){ 3 $('#slide img:gt(0)').hide(); 4 setInterval(function() { 5 $('#slide :first-child').fadeOut().next('img').fadeIn().end().appendTo('#slide'); 6 },3000); 7 }); 8
####上記コードだと、画像が切り替わるときに表示されていた画像が下にずれ落ちて、その後に次の画像が表示れてしまいます。
上記コードを用いたサイトをUPしていますので、よろしければ現状をご確認ください。
→ http://ivory-sushi-restaurant.ivorytowerlab.jp/
コードを参考にしたサイトは下記になります。
→ https://dad-union.com/javascript/69
どうすれば参考にしたサイトのデモ（https://dad-union.com/demo/js/20130912-fadein-fadeout-setinterval-appendto/）のように
画像が綺麗にフェードインフェードアウトで切り替えられるでしょうか?
jQueryは <head>〜</head>タグ内にCDNで
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>と読み込んでいます。
回答2件
0
すみません。解決しました。
ずっとjQueryのプログラムとHTMLの記述を疑っていたのですが、CSSの問題でした。
img 要素に position:absoluteを指定していないのが問題で意図した動きになっていませんでした。
投稿2020/08/12 08:16
総合スコア552
0
自己解決
すみません。解決しました。
ずっとjQueryのプログラムとHTMLの記述を疑っていたのですが、CSSの問題でした。
img 要素に position:absoluteを指定していないのが問題で意図した動きになっていませんでした。
投稿2020/08/12 07:58
総合スコア552
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。