滑动后的jQuery bxSlider动画答案

【问题标题】：jQuery bxSlider animation after slide滑动后的jQuery bxSlider动画
【发布时间】：2012-04-26 03:20:12
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： jquery animation bxslider

【解决方案1】：

您正在隐藏控件。而不是hide 使用fadeOut。 hide 设置display: none，其中fadeOut 将不透明度设置为零，这与fadeIn 相反

希望对你有所帮助。

【讨论】：

谢谢回复，我已经修改为fadeOut()。但#block6 仍然没有淡入（“slow”）。它显示但没有动画..只有最后一张幻灯片的 #block6 没有动画..
成功了吗？如果是，请接受答案，请阅读FAQ。您需要接受答案，以便其他人可以知道正确答案。谢谢。

【解决方案2】：

由于您没有指定模式：fade，bxSlider 默认为水平，而您的fadeIn javascript 可能会覆盖它，bxSlider 为水平模式复制第一张和最后一张幻灯片，以使过渡平滑。这意味着您的页面以两个“block” ID 和两个“block6” ID 结束，这会破坏 javascript，因为您只应该拥有特定 ID 的实例。我通过使用类名在我的滑块设置中解决了这个问题。

【讨论】：