javascript - jQuery Syntax, mouseover & timeouts -

javascript - jQuery Syntax, mouseover & timeouts -

i'm working on jquery first time , trying implement script element expand 'on mouse enter' 50px. after mouse has hovered 1 sec or more should expand farther 190px. when mouse leaves location should resize downwards 35px. if mouse leaves location before has expanded 190px should not go on step.

the code have developed far allows element expand, if mouse removed element sized 190px regardless of time hovered.

i realise need utilize timeout function or sort of if statement here, i'm having problems adding original code;

$(document).ready(function() { $("#element").on("mouseenter", function() { $(this).animate({"width": "50px"}) //delay 100ms, if mouse still hovered proceed .animate({"width": "190px"}); //else go on mouse leave function }).on("mouseleave", function() { $(this).animate({"width": "35px"}); }); });

like mentioned, i'm having problem finding right syntax , after reading through other questions i'm getting more confused; best use? timeouts, .hover, if statement etc.?

http://jsfiddle.net/#&togetherjs=3gl8z3blfi

try utilize settimeout function 1 sec timeout before sec animation:

class="snippet-code-js lang-js prettyprint-override">$("#element").on("mouseenter", function () { $(this).animate({width: 50}); $(this).data('hover-timeout', settimeout(function() { $(this).animate({width: 190}); }.bind(this), 1000)); }) .on("mouseleave", function () { cleartimeout($(this).data('hover-timeout')); $(this).stop(true).animate({width: 35}); }); class="snippet-code-css lang-css prettyprint-override">#element { background-color: #aaa; width: 35px; height: 50px; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="element"></div>

javascript jquery syntax hover mouseover