Question

我有两个按钮“form1”和“form2”，它们一个堆叠在另一个上面。

当我点击form1按钮时，应该以这样的方式显示id =“fone”的表单，使堆叠的按钮淡出并且表单淡入。表单有“后退”按钮，当单击它，表单淡出，堆叠的按钮淡入。

当我点击form2按钮时会发生同样的情况，另一个表单id =“ftwo”的表单会逐渐消失，依此类推。 ** HTML **

<div id="buttons">
<button id="one" class="btn btn-primary btn-block">Form1</button>
<button id="two" class="btn btn-primary btn-block">from2</button>
</div>

<br>
<div id="fone" class="col-sm-2">
<form role="form" class="hide">
    <input type="text" class="form-control" placeholder="Input me" >
     <input type="submit" class="form-control btn btn-danger" >
    <button class="btn btn-primary"> BACK TO BUTTON LIST </button>
</form>
</div>

    <div id="ftwo" class="col-sm-2">
<form role="form" class="hide">
    <input type="text" class="form-control" placeholder="Input me" >
     <input type="submit" class="form-control btn btn-danger" >
    <button class="btn btn-primary"> BACK TO BUTTON LIST </button>
</form>
</div>

对不起这个问题。我是jquery的新手。我可以为这个问题做个小提琴http://jsfiddle.net/2HwHf/1/

但我不知道如何使用它可以使eb成为可能。当我用Google搜索时，我发现添加css类onclick将完成这项工作。但我想在它们之间发生一些很好的转换，就像按钮崩溃一样这个形式是否已经消失，或类似的东西？

请给我一些帮助。我和css一起工作过，但是havnt已经触及jquery了，我们会知道如何使用jquery来实现这一点。

由于

Answer 1

jQuery中有很多选项可以做到这一点。这是一个简单的方法：

$('#two').click(function () {
  $('#buttons').hide();
  $('#ftwo').fadeIn();
});

http://jsfiddle.net/2HwHf/7/

Answer 2

要建立marcelo，你需要在按钮上添加一个fadeOut。 Fiddle

$('#one').click(function(){
    $('#one').fadeOut( "slow", function() {
        $('#fone').fadeToggle();
  });

});

Answer 3

以下是您的完整示例 JSFiddle

// Form Open Action
$('button').on('click', function(){
var whatForm = $(this).attr('id');
$('#buttons').slideUp();
$('.'+whatForm).slideDown();
});

// Back Button Action
$('.backbtn').on('click', function(e){
e.preventDefault();
$('#buttons').slideDown();
$('form').slideUp();
});

使用带动画的按钮显示不同的表单

3 个答案: