title: How to hide flash message after few seconds?
body: <p>In my application user can post challenge for other user. So after successful posting a challenge I am displaying one flash message for the same. But now I want to hide this message after some few seconds. So I wrote following code :  </p>
  
  <pre><code>$(document).ready(function(){
      setTimeout(function() {
          $("#successMessage").hide('blind', {}, 500)
      }, 5000);
  });
  
  &lt;div id="successMessage" style="text-align:center; width:100%"&gt;
      &lt;FONT color="green"&gt;
          &lt;%if flash[:alert]=="Your challenge is posted successfully."%&gt; 
              &lt;h4&gt;&lt;%= flash[:alert] if flash[:alert].present? %&gt;
          &lt;%end%&gt;
      &lt;/font&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But this code is not hiding the div "successMessage".</p>