jQuery Синтаксис, mouseover & timeouts

Question

Я работаю над JQuery в первый раз и пытаюсь реализовать скрипт для элемента, который будет расширять «на мыши» до 50 пикселей. После того, как мышь зависела в течение 1 секунды или более, она должна расширяться до еще 190 пикселей. Наконец, когда мышь покидает место, он должен изменить размер до 35 пикселей. Если мышь покидает местоположение до того, как он полностью расширится до 190 пикселей, он не должен продолжать этот шаг.

Код, который я разработал до сих пор, позволяет расширять элемент, но если мышь удалена, размер элемента составляет до 190 пикселей независимо от времени, зависящего от времени.

Я понимаю, что мне, скорее всего, придется использовать функцию тайм-аута или какое-то выражение if, однако у меня возникают проблемы с добавлением его к исходному коду;

$(document).ready(function() { 
    $("#element").on("mouseenter", function() { 
    $(this).animate({"width": "50px"}) 
//DELAY 100MS, IF THE MOUSE IS STILL HOVERED THEN PROCEED 
    .animate({"width": "190px"}); 
//ELSE CONTINUE WITH MOUSE LEAVE FUNCTION 
    }).on("mouseleave", function() { 
     $(this).animate({"width": "35px"}); 
    }); 
}); 

Как я уже говорил, у меня возникают проблемы с поиском правильного синтаксиса для этого и после прочтения других вопросов, я получаю больше запутывается; который лучше всего использовать? тайм-ауты, .hover, если заявление и т. д.?

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

Answer 1

Попробуйте использовать setTimeout функции в течение 1 секунды Таймаута перед второй анимацией:

$("#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}); 
 
});

#element { 
 
    background-color: #AAA; 
 
    width: 35px; 
 
    height: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="element"></div>

Answer 2

В JQuery у вас есть функция задержки. Лучше всего было бы, чтобы посмотреть в документе http://api.jquery.com/delay/