![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
jQueryのbxSlider を使用して、6枚のスライドギャラリー的なものを作っています。
各スライドがスライドした後に、onAfterSlide: function() を使用してオブジェクトのフェードをしたく以下の様に記述しています。1枚目から5枚目では、各スライドをした後にオブジェクトをフェードインでアニメーションができるのですが、最後のスライドのオブジェクトのみがアニメーションしません。コードは以下になります。どなたか最後のオブジェクトもアニメーションするスクリプトを教えていただけますでしょうか?
<script type="text/javascript">
$(function(){
var slider = $('#slider1').bxSlider({
controls: true,
duration: 2000,
easing: 'easeInOutQuart',
onAfterSlide: function(currentSlide){
if(currentSlide==0){
$("#block").fadeIn("slow");
}else{
$("#block").hide();
}
if(currentSlide==1){
$("#block2").fadeIn("slow");
}else{
$("#block2").hide();
}
if(currentSlide==2){
$("#block3").fadeIn("slow");
}else{
$("#block3").hide();
}
if(currentSlide==3){
$("#block4").fadeIn("slow");
}else{
$("#block4").hide();
}
if(currentSlide==4){
$("#block5").fadeIn("slow");
}else{
$("#block5").hide();
}
}
});
$('.thumbs a').click(function(){
var thumbIndex = $('.thumbs a').index(this);
slider.goToSlide(thumbIndex);
$('.thumbs a').removeClass('pager-active');
$(this).addClass('pager-active');
return false;
});
$('.thumbs a:first').addClass('pager-active');
});
</script>
<ul id="slider1">
<li class="slider1-1">
<div id="block" style="background-color: red; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;">
</div>
</li>
<li class="slider1-2">
<div id="block2" style="background-color: white; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;">
</div>
</li>
<li class="slider1-3">
<div id="block3" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;">
</div>
</li>
<li class="slider1-4">
<div id="block4" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;">
</div>
</li>
<li class="slider1-5">
<div id="block5" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;">
</div>
</li>
<li class="slider1-6">
<div id="block6" style="background-color: #FFF; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;">
</div>
</li>
</ul>
<div class="thumbs">
<a href=""><img src="img/1.jpg" width="50" height="50" /></a>
<a href=""><img src="img/2.jpg" width="50" height="50" /></a>
<a href=""><img src="img/3.jpg" width="50" height="50" /></a>
<a href=""><img src="img/4.jpg" width="50" height="50" /></a>
<a href=""><img src="img/5.jpg" width="50" height="50" /></a>
<a href=""><img src="img/6.jpg" width="50" height="50" /></a>
</div>
No.3ベストアンサー
- 回答日時:
#2です。
jsをDLして確認してみました。
bxSliderはリストの前と後ろに、最初と最後の要素をコピーして付け加えていますね。
スライドした時に連続して見えるようにするためでしょう。
そのため、id指定しても2つある要素の片方にしか実行されないみたいなので、消えないというのが原因みたい。
ところで、ご提示のソースでは全部のdivにposition:absoluteが指定されていますけれど、これだと完全に表示位置が重なってしまうのでスライドしないのと、親の要素(bxSliderが作成するラッパー)にoverflow:hiddenが指定されているのでそもそも表示されなくなってしまうと思いますけれど…
それなので、多分、これは何かの間違いか、liにposition:relative指定があるなどと仮定して以下の回答をしています。
(全体が不明なので、推測ですけれど)
イベント処理の部分を以下のようにすれば、ご希望のようになりませんか?
(なさりたいことが、よくわかりませんでしたので、また、見当違いの回答かも)
onAfterSlide: function(c, t, o){
$("#slider1 li div").hide();
$("div", o).fadeIn("slow");
}
*hide()でdisplay:noneになっていても、要素のwidthからpositionを計算しているみたいなので、#2の回答は関係なかったですね。
この回答への補足
ご教授いただき誠にありがとうございます、
liにはposition:relativeが指定されていますので、
各スライドが移動した後に、#slider1 li divがアニメーションしてくれました。
希望通りのアニメーションになってくれた思います。
最後のスライドが消えなかったのは、
id指定しても2つある要素の片方にしか実行されないからなのですね。
さらに一点解決したいと思う動きがあります。
例えば、下に配置しておりますclass="thumbs"の各サムネイルをクリックして、
連続して同じボタンをクリックすると、#slider1 li divのアニメーションがまた再生してしまいますので、各スライド後#slider1 li divが最初の一度だけ、アニメートする事は可能なのでしょうか?
勉強と経験不足で分からないのですが、$('.thumbs a').click(function(){
にreturn false;があるので、一度だけアニメーションするという認識だったのですが。
また、$("div", o)という記述がちょっと分からないので、調べてみます。
ありがとうございます。
No.2
- 回答日時:
ちゃんと調べてないので、想像の域での回答ですが…
要素をhide()すると、多分、display:none に設定されると想像しますが、それが原因ではないですか?
「非表示」にするのに visibility:hidden を利用すればいけそうな気がしますけれど…
この回答への補足
ご返答ありがとうございます。
$("#block6").css({visibility:"hidden"});
としてみましたが、6番目だけ#block6の表示が消えませんでした。
他によい記述方法があるのでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
html内でのマウスオーバー時に...
-
チェックボックスと画像切替の連動
-
jQuery bxSlider でのアニメー...
-
MAX関数を使ってからLEFT JOIN...
-
Vb.net2005での画像の合成方法
-
c++std::string型をTCHARに変換...
-
HTMLからimgのsrcのみを正規表...
-
IplImageのBmp変換。
-
<div ~ </div> で囲まれたテキ...
-
IFRAMEの表示/非表示を切り替え...
-
jqueryのsortableで一部ソート...
-
動的にHTMLコンテンツを吹き出...
-
変数名をどのようにつけるのが...
-
jQueryでシンプルドラッグドロ...
-
プルダウンの位置がwin/macでず...
-
クリックで色変更後に既に変更...
-
JSPでの画像ファイル表示
-
OpenCVの実行エラー
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
同一ページ内の複数のタグに同...
-
【jQuery】2分割レイアウトで、...
-
キャラクターがぴょこんと飛び...
-
画像をフェードアウト&フェー...
-
jqueryのプラグインslickの画像...
-
html5に変えるとスライドショー...
-
Javaスクリプトで画像を縦にス...
-
high slideをFC2ブログで
-
ご教授ください。
-
jQueryでタブ、スライダーを使...
-
チェックボックスと画像切替の連動
-
jQueryのclickイベントハンドラ
-
javascriptで文字サイズの変更
-
fontsize.jsでhtmlの大中小の設...
-
【iOS及びAndroid】リンク画像...
-
Firefoxとクロームでフェードイ...
-
javascript src書き換え
-
神経衰弱 順番に裏返し
-
アコーディオンメニューが開い...
おすすめ情報