显示部分onclick

Question

HTML

<section id="one">

<form>
<input type=text />
<button id=btn>Go</button>
</form>

</section>

<section id="two" >
<h1>Hi</h1>
</section>

我有上面的html，它有两个部分。我试图隐藏ID为"two"的部分隐藏并显示部分"one"。当我点击go按钮时，部分{{ 1}}应该淡出，应显示“one”部分。

有人可以帮我编写jquery吗？

我是jquery的新手。这会很有用。

我在http://jsfiddle.net/x8B8c/

有一个小提琴

请不要问我尝试了什么，我对javascript和html更新鲜，我想知道如何做到这一点

Answer 1

试试这个

HTML

<section id="one">
 <input type=text />
 <button id=btn>Go</button>
</section>

<section id="two" style="display:none">
 <h1>Hi</h1>
</section>

JQuery脚本

$('#btn').on('click', function(){
 $('#one').hide('slow')
 $('#two').show('slow');
});

<强> DEMO

Answer 2

$('#btn').click(function(){
 $('#two').hide(1000);
  $('#one').show(1000);
})

Answer 3

查看Working Demo

$('#btn').on('click', function () {
   $('#one').hide();
   $('#two').fadeIn();
});

我使用过jQuery on function

Answer 4

    $(document).ready(function(){
    $('#btn').on('click', function() {
    $('#two').fadeIn();
    $('#one').hide();
    });  

     });

Answer 5

根据您的要求，第1部分使用.fadeOut()，第2部分使用.fadeIn()。

$('#btn').on('click', function() {
    $('#one').fadeOut();
    $('#two').fadeIn();
});

小提琴演示：http://jsfiddle.net/budhram/x8B8c/2