初めての質問なので見づらい点がありましたらご容赦ください。
該当のソースコード
html
1<div class="caption"> 2 <span>Taro (<a href="#" target="_blank">link</a>)</span> 3 <span>Jiro (<a href="#" target="_blank">link</a>)</span> 4 <span>Saburo (<a href="#" target="_blank">link</a>)</span> 5</div>
javascript
1$(function(){ 2 $('.caption').children('span').css({opacity:'0'}); 3 $('.caption' + ' span:first').stop().animate({opacity:'1'},1500); 4 5 $('.caption' + ' :first-child').animate({opacity:'0'},1500).next('span').animate({opacity:'1'},1500).end().appendTo('.caption'); 6});
該当箇所を簡略して抜き出したものが上記になります。
これを動かして下記のようになってほしいのですが、
html
1<div class="caption"> 2 <span style="opacity: 1;">Jiro (<a href="#" target="_blank">link</a>)</span> 3 <span style="opacity: 0;">Saburo (<a href="#" target="_blank">link</a>)</span> 4 <span style="opacity: 0;">Taro (<a href="#" target="_blank">link</a>)</span> 5</div>
実際動かすと、
html
1<div class="caption"> 2 <span style="opacity: 1;">Jiro ()</span> 3 <span style="opacity: 0;">Saburo ()</span> 4 <span style="opacity: 0;">Taro ()</span> 5 <a href="#" target="_blank" style="opacity: 0;">link</a> 6 <a href="#" target="_blank" style="opacity: 0;">link</a> 7 <a href="#" target="_blank" style="opacity: 0;">link</a> 8</div>
aタグが外へ飛び出して「opacity: 0;」も何故か追加されてしまいます。
ちなみに「.end().appendTo('.caption')」の部分を取ると、
html
1<div class="caption"> 2 <span style="opacity: 0;">Jiro (<a href="#" target="_blank" style="opacity: 0;">link</a>)</span> 3 <span style="opacity: 1;">Saburo (<a href="#" target="_blank" style="opacity: 0;">link</a>)</span> 4 <span style="opacity: 0;">Taro (<a href="#" target="_blank" style="opacity: 0;">link</a>)</span> 5</div>
こうなります。
この時点でaタグに「opacity: 0;」が付いちゃっています。
「.next('span')」指定がまずいんだろうなと思うんですが、解決策がさっぱりわかりません。
「.next('span')」でaタグも含めた全部取得できるのかなと思ってたんですが…
お力添えよろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/14 09:46
2020/01/14 23:50