<p>I would like to flash a success message on my page.</p>

<p>I am using the jQuery <code>fadeOut</code> method to fade and then remove the element. I can increase the duration to make it last longer, however this looks strange.</p>

<p>What I would like to happen is have the element be displayed for five seconds, then fade quickly, and finally be removed.</p>

<p>How can you animate this using jQuery? </p>

[{'answer_id': 42255, 'author': 'John Millikin', 'author_id': 3560, 'author_profile': 'https://Stackoverflow.com/users/3560', 'pm_score': 4, 'selected': False, 'text': '<p>use <code>setTimeout(function(){$elem.hide();}, 5000);</code></p>\n\n<p>Where <code>$elem</code> is the element you wish to hide, and <code>5000</code> is the delay in milliseconds. You can actually use any function within the call to <code>setTimeout()</code>, that code just defines a small anonymous function for simplicity.</p>\n'}, {'answer_id': 42261, 'author': 'Ricky', 'author_id': 653, 'author_profile': 'https://Stackoverflow.com/users/653', 'pm_score': 2, 'selected': False, 'text': "<pre><code>var $msg = $('#msg-container-id');\n$msg.fadeIn(function(){\n  setTimeout(function(){\n    $msg.fadeOut(function(){\n      $msg.remove();\n    });\n  },5000);\n});\n</code></pre>\n"}, {'answer_id': 42271, 'author': 'John Sheehan', 'author_id': 1786, 'author_profile': 'https://Stackoverflow.com/users/1786', 'pm_score': 3, 'selected': False, 'text': '<p>For a pure jQuery approach, you can do</p>\n\n<pre><code>$("#element").animate({opacity: 1.0}, 5000).fadeOut();\n</code></pre>\n\n<p>It\'s a hack, but it does the job</p>\n'}, {'answer_id': 42698, 'author': 'dansays', 'author_id': 1923, 'author_profile': 'https://Stackoverflow.com/users/1923', 'pm_score': 3, 'selected': False, 'text': '<p>While @John Sheehan\'s approach works, you run into the <a href="http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/" rel="nofollow noreferrer">jQuery fadeIn/fadeOut ClearType glitch</a> in IE7. Personally, I\'d opt for @John Millikin\'s <code>setTimeout()</code> approach, but if you\'re set on a pure jQuery approach, better to trigger an animation on a non-opacity property, such as a margin.</p>\n\n<pre><code>var left = parseInt($(\'#element\').css(\'marginLeft\'));\n$(\'#element\')\n    .animate({ marginLeft: left ? left : 0 }, 5000)\n    .fadeOut(\'fast\');\n</code></pre>\n\n<p>You can be a bit cleaner if you know your margin to be a fixed value:</p>\n\n<pre><code>$(\'#element\')\n    .animate({ marginLeft: 0 }, 5000)\n    .fadeOut(\'fast\');\n</code></pre>\n\n<p><strong>EDIT</strong>: It looks like the <a href="http://plugins.jquery.com/project/fxqueues" rel="nofollow noreferrer">jQuery FxQueues plug-in</a> does just what you need:</p>\n\n<pre><code>$(\'#element\').fadeOut({\n    speed: \'fast\',\n    preDelay: 5000\n});\n</code></pre>\n'}, {'answer_id': 80675, 'author': 'RET', 'author_id': 14750, 'author_profile': 'https://Stackoverflow.com/users/14750', 'pm_score': 2, 'selected': False, 'text': "<p>Following on from dansays' comment, the following seems to work perfectly well:</p>\n\n<p><code>$('#thing') .animate({dummy:1}, 2000)\n            .animate({ etc ... });</code></p>\n"}, {'answer_id': 2068227, 'author': 'Nathan Long', 'author_id': 4376, 'author_profile': 'https://Stackoverflow.com/users/4376', 'pm_score': 6, 'selected': True, 'text': "<p>The new <code>delay()</code> function in jQuery 1.4 should do the trick.</p>\n\n<pre><code>$('#foo').fadeIn(200).delay(5000).fadeOut(200).remove();\n</code></pre>\n"}, {'answer_id': 3040106, 'author': 'thekingoftruth', 'author_id': 241367, 'author_profile': 'https://Stackoverflow.com/users/241367', 'pm_score': 1, 'selected': False, 'text': "<p>dansays's answer just doesn't work for me. For some reason, <code>remove()</code> runs immediately and the div disappears before any animations happen.</p>\n\n<p>The following works, however (by omitting the <code>remove()</code> method):</p>\n\n<pre><code>$('#foo').fadeIn(500).delay(5000).fadeOut(500);\n</code></pre>\n\n<p>I don't mind if there are hidden DIVs on the page (there shouldn't be more than a few anyway).</p>\n"}, {'answer_id': 7735285, 'author': 'rjmoggach', 'author_id': 586932, 'author_profile': 'https://Stackoverflow.com/users/586932', 'pm_score': 0, 'selected': False, 'text': "<p>Update for 1.6.2</p>\n\n<p>Nathan Long's answer will cause the element to pop off without obeying delay or <code>fadeOut</code>.</p>\n\n<p>This works:</p>\n\n<pre><code>$('#foo').delay(2000).fadeOut(2000);\n</code></pre>\n"}]
['https://Stackoverflow.com/questions/42254', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/3645/']