jq渐变动画效果

要实现动画效果需要使用jquery的animate函数与css的opacity属性，opacity在IE下不识别，但是我测试的时候还是可以运行的不知道是不是jquery做好了兼容

首先看html跟css样式：

#tab{position:relative;left:0;}
#tab div{position:absolute;left:0;}

<div id="tab">
  <div><img src="images/1.jpg" /></div>
  <div><img src="images/2.jpg" /></div>
  <div><img src="images/3.jpg" /></div>
  <div><img src="images/4.jpg" /></div>
</div>

下面看js代码：

 $(function(){
      var index=0;

   $("#tab>div:gt(0)").css({opacity:0});

      var oLi=$("#tab>div").length;
      function show(num){
         //alert(num);
        
         $("#tab>div").eq(num).animate({opacity:0},1500).next().animate({opacity:1},1500);
         if(num==oLi ){
             $("#tab>div").eq(0).animate({opacity:1},1500);
         }
      }
     function zidong(){
        
         if(index>oLi){
            index=0;
         }else if(index<0){
            index==oLi;
         }
         show(index);
         index=index+1;
     }
    int=setInterval(zidong,3000);
      
  })

好了，这样就可以实现渐隐动画的效果，不过缺少切换的按钮动画的效果原理，这个可以自行添加；

同时也可以使用jquery的fadeIn、fadeOut函数实现渐隐动画效果，但是本人看着这个动画效果有点生硬，还是觉得用opacity比较好一点,或者使用fadeto、fadeToggle也不错的