Необходимо сделать плавное изменение ширины блока при наведении на него. При наведении мышкой на блок он должен увеличиться до нужного размера. В случае, если убрать курсор мыши раньше, чем блок увеличится до нужного размера, то в этом случае блок не должен останавливаться, а должен закончить изменение своего размера.
Пока курсор мыши наведен на блок, блок должен оставаться в измененном/увеличенном состоянии.
Когда курсор мыши убираешь с блока, то блок должен вернуться в исходное положение, но не сразу, а с задержкой в пару секунд. В случае, если во время уменьшения блока навести курсор мыши на блок, то блок должен сначала вернуться в исходное положение, а после уже увеличиваться. Вот такая стоит задача. Очень прошу мне помочь.
<div class="div1">Block1</div>
div {
background-color:#ccc;
width:200px;
height:100px;
border:2px solid #000;
}
$(document).ready(function(){
$(".div1").on({
mouseenter: function() {
$(this).animate({
width: 500
},
{duration:300, queue: false}
)
},
mouseleave: function() {
$(this).animate({
width: "200px"
},
{duration:300, queue: false}
)
}
})
});