Фича для нуба
 

Всем привет!
Недавно начал изучать javascript и jquery, и вот столкнулся с такой бедой.

$('#btn').hover(function(){
        $(this).animate({width: '100%'}, 1000);
    },function(){
        $(this).animate({width: '200px'}, 1000);
});

Если навести курсор на элемент с id="btn", он увеличится в размерах, если убрать курсор, он уменьшиться. Так как интервал выполнения данной функции 1000, увеличение/уменьшение размера идет очень плавно.
Так вот. Если раз 5 или больше навести на этот элемент, скрипт будет выполняться 5 или больше раз, и не остановится пока не выполнит все разы. Это выглядит ужасно. С таким интервалом выглядит как лаг.

Как же это пофиксить?

На CSS же можно, зачем jQuery?

<style>
button {
    width: 100px;
    -webkit-transition: width 0.5s linear;
    -moz-transition: width 0.5s linear;
    -o-transition: width 0.5s linear;
    transition: width 0.5s linear;
}

button:hover {
    width: 100%;
}
</style>
<button>Button</button>

можно и на css, но у меня конкретная задача сделать с помощью JQuery...

функция stop() помогла, спасибо

Я обычно делал stop, ибо не приоритетно было, но вообще для того чтоб сделать все по человечьи используют работать надо с очередью https://api.jquery.com/queue/