title: Bootstrap alert append and fade in/out
body: <p>I want to add Bootstrap alert dynamically with <code>fadeIn</code> effect and <code>fadeOut</code> effect on close, I tried:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function alert(title, text, type) {
    var html = $("&lt;div class='alert alert-dismissible hide fade " + type + "'&gt;&lt;strong&gt;" + title + "&lt;/strong&gt; " + text + "&lt;a href='#' class='close float-close' data-dismiss='alert' aria-label='close'&gt;×&lt;/a&gt;&lt;/div&gt;");
    $('body').append(html);
    html.addClass('in show');
  }
  
  
  $('#EMail').click(function() {
    alert('Error!', 'Your Email is not valid', 'alert-danger');
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;input type="text" id="EMail" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>With this, close work successfully but append with <code>fadeIn</code> effect not working. How can I append Bootstrap alert in document with fadeIn effect?</p>
  
  <p>Note that, I don't need jQuery <code>fadeIn</code> or <code>fadeOut</code> I want to do this only with standard bootstrap <code>class</code> such <code>fade</code> + <code>in</code> or <code>out</code></p>