jQuery bxSlider анимация после слайда

Question

Я использую jQuery bxSlider для стирания элементов на моих слайдах. Что я хочу сделать, это анимировать (затухать) элементы на каждом слайде, используя onAfterSlide: function(). он анимируется на слайдах 1to5, но он не оживляет (исчезает) только на последнем слайде.

вот код. кто-нибудь может помочь?

<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(); 
    } 
    if(currentSlide==5){ 
     $("#block6").fadeIn("slow"); 
    }else{ 
     $("#block6").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> 

Answer 1

Вы скрываете элементы управления. Вместо hide используйте fadeOut. hide устанавливает display: none где, как fadeOut множества непрозрачность к нулю, что является реверс fadeIn

Надеется, что это помогает вам.

Answer 2

Поскольку вы не указываете режим: fade, bxSlider по умолчанию выполняет горизонтальное положение, в то время как javascript вашего fadeIn может переопределить это, bxSlider дублирует первый и последний слайды для горизонтального режима, чтобы сделать переход плавным. Это означает, что ваша страница заканчивается двумя «блочными» идентификаторами и двумя «блочными» идентификаторами, которые разбивают javascript, так как вы должны иметь только экземпляр определенного идентификатора. Я исправил это в моей настройке слайдера, вместо этого вместо этого вместо имени класса.