title: how to use fade in and fade button both instead of using fade toggle
body: <p>This is the code i am dealing with,and i want to use both fade in and fade out button but having problem as i don't know what id to pass for second button here is the code with jquery:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
  $("button:first").click(function(){
      $("#div1").fadeIn();
      $("#div2").fadeIn("slow");
      $("#div3").fadeIn(3000);
  });
  $("button:b2").click(function(){
      $("#div1").fadeOut();
      $("#div2").fadeOut("slow");
      $("#div3").fadeOut(3000);
    });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;p&gt;Demonstrate fadeIn() with different parameters.&lt;/p&gt;
  
  &lt;button id="b1"&gt;Click to fade in boxes&lt;/button&gt;&lt;br&gt;&lt;br&gt;
  &lt;button id="b2"&gt;Click to fade out boxes&lt;/button&gt;&lt;br&gt;&lt;br&gt;
  
  
  &lt;div id="div1" style="width:80px;height:80px;display:none;background-color:red;"&gt;&lt;/div&gt;&lt;br&gt;
  &lt;div id="div2" style="width:80px;height:80px;display:none;background-color:green;"&gt;&lt;/div&gt;&lt;br&gt;
  &lt;div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>
     </p>