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

在线预览   源码下载

实现的代码。

html代码：

<div align="center">
        <form id="myform">
        <div id="bloc_recherche_couleur">
            <div id="etape0_recherche" style="color: #ffffff;">
                <br />
                <div class="titre">
                    WELCOME IN MY JUNGLE</div>
                <br />
                I want to know you, could you please say me more about you ?<br />
                <br />
                <div class="btn_noir etape_suivante" etape="0">
                    Begin...</div>
                <br />
                <br />
            </div>
            <div id="etape1_recherche" class="div_cache" style="display: none; text-align: center;">
                <br />
                <div class="titre">
                    Do you speak english ?</div>
                <br />
                <input type="text" name="" id="" value="" placeholder="Speak english ?" class="champtxt" /><br />
                <br />
                <div class="btn_noir etape_precedente" etape="1">
                    PREVIOUS</div>
                <div class="btn_noir etape_suivante" etape="1">
                    NEXT</div>
            </div>
            <div id="etape2_recherche" class="div_cache" style="display: none; text-align: center;">
                <br />
                <div class="titre">
                    Do you have a british accent ?</div>
                <br />
                <input type="text" name="" id="" value="" placeholder="British accent ?" class="champtxt" /><br />
                <br />
                <div class="btn_noir etape_precedente" etape="2">
                    PREVIOUS</div>
                <div class="btn_noir etape_suivante" etape="2">
                    NEXT</div>
            </div>
            <div id="etape3_recherche" class="div_cache" style="display: none; text-align: center;">
                <br />
                <div class="titre">
                    Do you like barbecues ?</div>
                <br />
                <input type="text" name="" id="" value="" placeholder="Bbq ?" class="champtxt" /><br />
                <br />
                <div class="btn_noir etape_precedente" etape="3">
                    PREVIOUS</div>
                <div class="btn_noir etape_suivante" etape="3">
                    NEXT</div>
            </div>
            <div id="etape4_recherche" class="div_cache" style="display: none; color: #ffffff;">
                <br />
                <div class="titre">
                    Thanks !
                </div>
                <br />
                Now I know you...<br />
                <br />
                <div class="btn_noir etape_precedente" etape="4">
                    PREVIOUS</div>
                <div class="btn_noir" id="terminer">
                    SAVE &amp; CLOSE</div>
            </div>
        </div>
        <div id="btn_recherche" statut="ferme">
            BEGIN THE QUIZ</div>
        </form>
    </div>

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;
        }

js代码：

 $(document).ready(function () {

            $("#btn_recherche").click(function () {
                var statut = $(this).attr("statut");
                $("#bloc_recherche_couleur").slideToggle("slow");
                if (statut == "ferme") {
                    $(this).attr('statut', "ouvert");
                    $(this).html('CLOSE THE QUIZ');
                }
                else {
                    $(this).attr('statut', "ferme");
                    $(this).html('OPEN THE QUIZ');
                }
            });


            $(".etape_suivante").click(function () {
                var etape_actuelle = $(this).attr('etape');
                var etape_suivante = parseInt(etape_actuelle) + 1;
                $("#etape" + etape_actuelle + "_recherche").hide("slide", { direction: "up" }, 300,
        function () {
            $("#etape" + etape_suivante + "_recherche").show("slide", { direction: "down" }, 300);
        });
            });

            $(".etape_precedente").click(function () {
                var etape_actuelle = $(this).attr('etape');
                var etape_precedent = parseInt(etape_actuelle) - 1;
                $("#etape" + etape_actuelle + "_recherche").hide("slide", { direction: "down" }, 300,
       function () {
           $("#etape" + etape_precedent + "_recherche").show("slide", { direction: "up" }, 300);
       });
            });


            $("#terminer").click(function () {

                //HERE SUBMIT THE FORM WITH AN AJAX REQUEST (serialize #myform's inputs, etc...)...

                $("#bloc_recherche_couleur").slideToggle("slow");
                $("#btn_recherche").html('OPEN THE QUIZ');
                $(".div_cache").hide();
                $(".champtxt").val('');
                $("#etape0_recherche").show(1500);
            });
        });

注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/10226

在线预览    源码下载