今天给大家分享一款动漫网站基于jquery的横向手风琴特效。这款手风琴特效适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下：

   

实现的代码。

html代码：

     
        
      
                   动漫人物
      
        
      
            
       
                
        
                    
                        
                    
         
                        
          
 
            
          
                        
          
 
           
 
            
 
             
 
              神崎·H·亚里亚 
              8.9 
             
 
             
 
              性别：
              女
             
 
             
 
              属性： 
              长发 傲娇 贫RU  双马尾 枪械少女 萝莉 虎牙  
             
 
             
 
              动漫：
              《绯弹的亚里亚》
             
 
             
 
              地区：
              日本
             
 
            
 
            
 
            
 
           
 
          
                        
          
 
          
                        
          
 
           动漫人物介绍： 
           动漫作品《绯弹的亚里亚》中的女主角，英国著名侦探夏洛克·福尔摩斯的后裔，福尔摩斯四世。在第七卷可得知出生日为9月23日。没有遗传到祖先优秀推理能力的她，被家族视为废物。但性格不服输又自尊极强的亚里亚，凭借自身天生的战斗感及努力，在英国武侦界闯出了名气 
           详情>> 
          
                    
         
                
                
        
                    
                        
                    
         
                        
          
 
            
          
                        
          
 
           
 
            
 
             
 
              神崎·H·亚里亚 
              8.9 
             
 
             
 
              性别：
              女
             
 
             
 
              属性： 
              长发 傲娇 贫RU  双马尾 枪械少女 萝莉 虎牙  
             
 
             
 
              动漫：
              《绯弹的亚里亚》
             
 
             
 
              地区：
              日本
             
 
            
 
            
 
            
 
           
 
          
                        
          
 
          
                        
          
 
           动漫人物介绍： 
           动漫作品《绯弹的亚里亚》中的女主角，英国著名侦探夏洛克·福尔摩斯的后裔，福尔摩斯四世。在第七卷可得知出生日为9月23日。没有遗传到祖先优秀推理能力的她，被家族视为废物。但性格不服输又自尊极强的亚里亚，凭借自身天生的战斗感及努力，在英国武侦界闯出了名气 
           详情>> 
          
                    
         
                
                
        
                    
                        
                    
         
                        
          
 
            
          
                        
          
 
           
 
            
 
             
 
              神崎·H·亚里亚 
              8.9 
             
 
             
 
              性别：
              女
             
 
             
 
              属性： 
              长发 傲娇 贫RU  双马尾 枪械少女 萝莉 虎牙  
             
 
             
 
              动漫：
              《绯弹的亚里亚》
             
 
             
 
              地区：
              日本
             
 
            
 
            
 
            
 
           
 
          
                        
          
 
          
                        
          
 
           动漫人物介绍： 
           动漫作品《绯弹的亚里亚》中的女主角，英国著名侦探夏洛克·福尔摩斯的后裔，福尔摩斯四世。在第七卷可得知出生日为9月23日。没有遗传到祖先优秀推理能力的她，被家族视为废物。但性格不服输又自尊极强的亚里亚，凭借自身天生的战斗感及努力，在英国武侦界闯出了名气 
           详情>> 
          
                    
         
                
                
        
                    
                        
                    
         
                        
          
 
            
          
                        
          
 
           
 
            
 
             
 
              神崎·H·亚里亚 
              8.9 
             
 
             
 
              性别：
              女
             
 
             
 
              属性： 
              长发 傲娇 贫RU  双马尾 枪械少女 萝莉 虎牙  
             
 
             
 
              动漫：
              《绯弹的亚里亚》
             
 
             
 
              地区：
              日本
             
 
            
 
            
 
            
 
           
 
          
                        
          
 
          
                        
          
 
           动漫人物介绍： 
           动漫作品《绯弹的亚里亚》中的女主角，英国著名侦探夏洛克·福尔摩斯的后裔，福尔摩斯四世。在第七卷可得知出生日为9月23日。没有遗传到祖先优秀推理能力的她，被家族视为废物。但性格不服输又自尊极强的亚里亚，凭借自身天生的战斗感及努力，在英国武侦界闯出了名气 
           详情>> 
          
                    
         
                
                
        
                    
                        
                    
         
                        
          
 
            
          
                        
          
 
           
 
            
 
             
 
              神崎·H·亚里亚 
              8.9 
             
 
             
 
              性别：
              女
             
 
             
 
              属性： 
              长发 傲娇 贫RU  双马尾 枪械少女 萝莉 虎牙  
             
 
             
 
              动漫：
              《绯弹的亚里亚》
             
 
             
 
              地区：
              日本
             
 
            
 
            
 
            
 
           
 
          
                        
          
 
          
                        
          
 
           动漫人物介绍： 
           动漫作品《绯弹的亚里亚》中的女主角，英国著名侦探夏洛克·福尔摩斯的后裔，福尔摩斯四世。在第七卷可得知出生日为9月23日。没有遗传到祖先优秀推理能力的她，被家族视为废物。但性格不服输又自尊极强的亚里亚，凭借自身天生的战斗感及努力，在英国武侦界闯出了名气 
           详情>> 
          
                    
         
                
                
        
                    
                        
                    
         
                        
          
 
            
          
                        
          
 
           
 
            
 
             
 
              神崎·H·亚里亚 
              8.9 
             
 
             
 
              性别：
              女
             
 
             
 
              属性： 
              长发 傲娇 贫RU  双马尾 枪械少女 萝莉 虎牙  
             
 
             
 
              动漫：
              《绯弹的亚里亚》
             
 
             
 
              地区：
              日本
             
 
            
 
            
 
            
 
           
 
          
                        
          
 
          
                        
          
 
           动漫人物介绍： 
           动漫作品《绯弹的亚里亚》中的女主角，英国著名侦探夏洛克·福尔摩斯的后裔，福尔摩斯四世。在第七卷可得知出生日为9月23日。没有遗传到祖先优秀推理能力的她，被家族视为废物。但性格不服输又自尊极强的亚里亚，凭借自身天生的战斗感及努力，在英国武侦界闯出了名气 
           详情>> 
          
                    
         
                
            
       
        
      
    
     

js代码：

$(function () {            $(".nav_item").removeClass("active");            $("#nav_index").addClass("active");            var $centerwell_first = $('#centerwell li:first');            $centerwell_first.animate({ width: '545px' }, 300);            $centerwell_first.find('h3').addClass("on");            $('#centerwell li').click(function () {                if (!$(this).is(':animated')) {                    $(this).animate({ width: '545px' }, 300).siblings().animate({ width: '100px' }, 300);                    $('#centerwell li h3').removeClass("on");                    $(this).find("h3").addClass("on");                }            });        });

via：