jquery fadein on buttonclick

Question

我正在做一个引导网站，我希望jQuery在我的文本中淡出一个按钮点击。这是我的代码：

​

$(document).ready(function() {
  $('div.hidden').fadeIn(1000).removeClass('hidden');
});

$(#homebutton).onclick(function() {
  $('#homebutton.hidden').fadein(1000).removeClass('hidden');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">J&J Services</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#section1">Information</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <section class=" section0 homecontent col-md-12">
    <div class="container-fluid">
      <div class="hidden" style="display:none;">
        <h1>welcome to J&J services.
          <hr>
          <button id="homebutton" class="btn btn-success btn-large">
            <a href="#section1">click here to learn about us today.</a>
        </h1>
      </div>
      </div>
    </section>

    <section class="section1 information ">
      <div class="container-fluid hidden"></div>
    </section>
    </div>
</section>

​

我是jQuery的新手，我不知道我做错了什么。提前谢谢你，

Answer 1

使用修订的HTML和jquery目标：

​

$(document).ready(function() {
   $('.section0 .hidden').fadeIn(1000).removeClass('hidden');
});
$('#homebutton').on('click', function() {
   $('.section1 .hidden').fadeIn(1000).removeClass('hidden');
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">J&amp;J Services</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li><a href="#section1">Information</a>
          </li>
          <li><a href="#">Services</a>
          </li>
          <li><a href="#">Pricing</a>
          </li>
          <li><a href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <section class="section0 homecontent col-md-12">
    <div class="container-fluid">
      <div class="hidden" style="display:none;">
        <h1>welcome to J&amp;J services.
          <hr>
          <button id="homebutton" class="btn btn-success btn-large">
            click here to learn about us today.
          </button>
        </h1>
      </div>
    </div>
  </section>

  <section class="section1 information ">
    <div class="container-fluid hidden" style="display:none;">Information</div>
  </section>
</section>

​

Answer 2

我想当你点击按钮时，你想淡入section1文本，像这样更新：

$('#homebutton').on('click', function() {
   $('.container-fluid').fadeIn(1000).removeClass('hidden');
});