今天要给大家分享一款基于jquery ui的动画提交表单。这款提交表单的的效果是以动画的形式依次列表所需填写的信息。效果非常不错，效果图如下：

   

实现的代码。

html代码：

     
        
      
        
       
            
        
                
         
                
         
                              WELCOME IN MY JUNGLE
         
                
         
                I want to know you, could you please say me more about you ?
         
                
         
                
         
                              Begin...
         
                
         
                
         
            
        
            
        
                
         
                
         
                              Do you speak english ?
         
                
         
                
         
         
                
         
                
         
                              PREVIOUS
         
                
         
                              NEXT
         
            
        
            
        
                
         
                
         
                              Do you have a british accent ?
         
                
         
                
         
         
                
         
                
         
                              PREVIOUS
         
                
         
                              NEXT
         
            
        
            
        
                
         
                
         
                              Do you like barbecues ?
         
                
         
                
         
         
                
         
                
         
                              PREVIOUS
         
                
         
                              NEXT
         
            
        
            
        
                
         
                
         
                              Thanks !                
         
                
         
                Now I know you...
         
                
         
                
         
                              PREVIOUS
         
                
         
                              SAVE & CLOSE
         
            
        
        
       
        
       
                    BEGIN THE QUIZ
       
        
      
    
     

css代码：

.titre        {
               color: #ffffff;            font-size: 24px;        }                .btn_noir        {
               font-size: 14px;            cursor: pointer;            padding: 8px;            border-radius: 2px;            background-color: #333333;            color: #ffffff;            display: inline-block;            margin: 8px;            font-weight: 500;            width: 100px;        }                .champtxt        {
               width: 300px;            font-size: 16px;            padding: 5px;            margin: 0px;        }                .btn_noir:hover        {
               background-color: #000000;        }                #bloc_recherche_couleur        {
               background-color: #ffbe40;            width: 100%;            height: 200px;            display: none;        }                        #btn_recherche        {
               background-color: #ffbe40;            width: 400px;            margin-bottom: 20px;            color: #ffffff;            font-weight: 500;            text-align: center;            padding: 10px;            border-radius: 0px 0px 3px 3px;            cursor: pointer;        }

注：本文原创文章，转载请注明原文地址：