Jquery和Bootstrap：将一个面板内容从一列动画到另一列

Question

我使用Bootstrap，jQuery，jQueryUI，并希望在用户回答问题并点击＆＃34; Valider＆＃34;时将三个面板移到左侧。 使用CSS叠加技巧（.opacity-gauche和.opacity-droite）

对左侧和右侧面板进行淡化效果

我所看到的效果是：

1. 当用户点击＆＃34; Valider＆＃34;时，三个面板应该向左移动。
2. .panel-left div应该消失然后被移除。
3. .panel-main成为.panel-left
4. .panel.right成为.panel.main
5. 应该创建一个新的.panel-right并且＆＃39;滑动＆＃39;从右边开始。



代码：

        <div class="row">
            <div class="col-sm-4 hidden-xs" style="position:relative">
                <div class="panel panel-default text-center panel-left">
                    <div class="panel-heading"><h3 class="panel-title">Question <span class="question-numero">1</span> sur <span class="question-nombre-total">5</span></h3></div>
                    <div class="panel-body text-center">
                        <h3 class="question-donnee">5 &times 3 = 15</h3>
                        <div class="input-group mt20 invisible">
                            <div class="input-group-addon">=</div>
                            <input type="text" class="form-control" id="question-reponse" placeholder="Réponse">
                        </div>
                        <div class="btn btn-primary btn-block mt20 invisible" id="">Valider</div>
                    </div>
                </div>
                <div style="position:absolute;width:100%;height:100%;top:0px;left:0px;z-index:1000" class="opacity-gauche">&nbsp;</div>
            </div>
            <div class="col-xs-12 col-sm-4" style="position:relative">
                <div class="panel panel-default text-center panel-main">
                    <div class="panel-heading"><h3 class="panel-title">Question <span class="question-numero">2</span> sur <span class="question-nombre-total">5</span></h3></div>
                    <div class="panel-body">
                        <h3 class="question-donnee">5 &times 3</h3>
                        <div class="input-group mt20">
                            <div class="input-group-addon">=</div>
                            <input type="text" class="form-control" id="question-reponse" placeholder="Réponse">
                        </div>
                        <div class="btn btn-primary btn-block mt20" id="question-valider">Valider</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 hidden-xs" style="position:relative">
                <div class="panel panel-default text-center panel-right">
                    <div class="panel-heading"><h3 class="panel-title">Question <span class="question-numero">3</span> sur <span class="question-nombre-total">5</span></h3></div>
                    <div class="panel-body text-center">
                        <h3 class="question-donnee">Prochaine question</h3>
                        <div class="input-group mt20 invisible">
                            <div class="input-group-addon">=</div>
                            <input type="text" class="form-control" id="" placeholder="Réponse">
                        </div>
                        <div class="btn btn-primary btn-block mt20 invisible" id="question-valider">Valider</div>
                    </div>
                </div>
                <div style="position:absolute;width:100%;height:100%;top:0px;left:0px;z-index:1000" class="opacity-droite">&nbsp;</div>
            </div>
        </div>


        <script>
            $('#question-valider').click(function(ev){
                var panelwidth = $('.panel-main').width();
                //var panelright = $('.panel-right').width();

                $('.panel-left').animate({'width':"0px"}, 400);
                $('.panel-right').css('position','absolute').css('width', panelwidth+'px').animate({'left':"-"+($('.panel-main').parent().width()+15)+"px"}, 400);
                $('.panel-main').css('position','absolute').css('width', panelwidth+'px').animate({'left':"-"+($('.panel-main').parent().width()+15)+"px"}, 400);
            });
        </script>

感谢您的帮助！

罗勒