StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>If you want to delay an action within a hover, you can use javascripts <a href="http://www.w3schools.com/js/js_timing.asp" rel="nofollow"><code>.setTimeout()</code></a> to add a delay of x seconds.</p> <p>Try this, <em>it will hide all odd items in a list, then add a hover effect to all the even ones, upon hovering it will instantly toggle the active class, and after two seconds it will toggle the next object</em>:</p> <pre><code>$(".wypWedkarskie li").filter(":odd").hide().end().filter(":even").hover( function() { var obj = $(this); var nextObj = obj.next(); obj.toggleClass("active"); setTimeout(function() { nextObj.slideToggle(); }, 2000); } ); </code></pre> <p>You can see a working <a href="http://jsfiddle.net/fsCus/3/" rel="nofollow"><strong>demo here</strong></a></p> <hr> <p><strong>Update :</strong></p> <p>This should give you what I believe you are after. <br /> It will highlight the item you are hovering over instantly. After 2 seconds, if you are still hovering it will show the 2nd item. As soon as you stop hovering it will hide the 2nd item. If you stop hovering before 2 seconds, the 2nd item won't be shown:</p> <pre><code>$(".wypWedkarskie li").filter(":odd").hide().end().filter(":even").hover( function() { var obj = $(this); var nextObj = obj.next(); obj.addClass("active"); setTimeout(function() { if (obj.hasClass('active')) { nextObj.slideDown(); } }, 2000); }, function() { var obj = $(this); var nextObj = obj.next(); obj.removeClass('active'); nextObj.slideUp(); } ); </code></pre> <p>See a working <a href="http://jsfiddle.net/fsCus/5/" rel="nofollow"><strong>demo here</strong></a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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