Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>This is a very simple solution. Idea is, if you don't move your mouse over the div-container.. it will <a href="http://api.jquery.com/slideUp/" rel="nofollow"><code>slideUp()</code></a> the container itself in 2000ms (I put 2000ms, because its boring to wait <a href="http://www.google.com/search?q=10%20seconds%20to%20milliseconds" rel="nofollow">10sec</a>).</p> <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt; &lt;style&gt; div {width: 400px; border: 1px solid;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; This is the paragraph to end all paragraphs. You should feel &lt;em&gt;lucky&lt;/em&gt; to have seen such a paragraph in your life. Congratulations! &lt;/div&gt; &lt;script&gt; $(document).ready(function () { var mouseover_to = setTimeout(function () { $("div").slideUp("slow"); }, 2000); // Change it to 10000 to be 10sec $('div').mouseover(function () { clearTimeout(mouseover_to); }); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><sup><strong>[ <a href="http://jsfiddle.net/hobobne/dZdCt/" rel="nofollow">View output</a> ]</strong></sup></p> <ol> <li>First it will wait till the document is ready</li> <li>It will start the countdown to 2000ms with <code>setTimeout()</code> and sets it as resource to <code>mouseover_to</code> variable.</li> <li>However, if <a href="http://api.jquery.com/mouseover/" rel="nofollow"><code>mouseover()</code></a> is detected over the <code>div</code> then the countdown will be canceled with <code>clearTimeout()</code>, thanks to the help of the resource <code>mouseover_to</code></li> </ol>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload