title: Bootstrap 3 - How to fade-in alert box on-click and fade-out after 3 seconds
body: <p>I am using AngularJS and Bootstrap 3. My web app has an "Update" button where it saves any changes the user makes. When the user clicks on the "Update" button, I want to activate and fade-in bootstrap's alert box saying "Information has been saved" and then fade-out after 3 seconds. I don't know how to create this function and may need some help..</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I have decided to use this approach:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;button type="button" class="btn btn-info" ng-click="save()"&gt;Update&lt;/button&gt;
  
  &lt;div id = "alert_placeholder"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>$scope.save = function() {
      $('#alert_placeholder').html('&lt;div class="alert alert-warning alert-dismissable"&gt;&lt;button type="button" class="close" data-dismiss="alert" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;&lt;span&gt;Your information has been updated.&lt;/span&gt;&lt;/div&gt;')
      setTimeout(function() {
          $("div.alert").remove();
      }, 3000);
  }
  </code></pre>
  
  <p>I would like to make the alert box fade-in when it first appears and fade-out as it gets removed after 3 seconds, but I am not sure how to make it work with the code I have.</p>