jQuery bxSlider でのアニメーション

質問

jQueryのbxSlider を使用して、6枚のスライドギャラリー的なものを作っています。
各スライドがスライドした後に、onAfterSlide: function() を使用してオブジェクトのフェードをしたく以下の様に記述しています。１枚目から５枚目では、各スライドをした後にオブジェクトをフェードインでアニメーションができるのですが、最後のスライドのオブジェクトのみがアニメーションしません。コードは以下になります。どなたか最後のオブジェクトもアニメーションするスクリプトを教えていただけますでしょうか？

<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

fujillin · ベストアンサー

#2です。

ｊｓをＤＬして確認してみました。
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

fujillin

ちゃんと調べてないので、想像の域での回答ですが…

要素をhide()すると、多分、display:none に設定されると想像しますが、それが原因ではないですか？

「非表示」にするのに visibility:hidden を利用すればいけそうな気がしますけれど…

補足

ご返答ありがとうございます。

$("#block6").css({visibility:"hidden"});
としてみましたが、６番目だけ#block6の表示が消えませんでした。

他によい記述方法があるのでしょうか。

回答No.1

mpro-gram

if(currentSlide の条件に最後を動作させる条件がありません。
６枚あるので、0 から 5まで必要です。

補足

ご返答ありがとうございます。

if(currentSlide==5){
$("#block6").fadeIn("slow");
}else{
$("#block6").hide();
}

を記述しても、最後のスライドのアニメーションが行われません。
記述が間違っておりますでしょうか？