It is necessary to make a smooth change in the width of the block when you hover on it. When you hover the mouse on the block, it should increase to the desired size. If the mouse cursor is removed before the block is increased to the desired size, then the block should not stop, but should finish changing its size.

While the mouse cursor is over the block, the block should remain in a modified / enlarged state.

When the mouse cursor is removed from the block, the block should return to its original position, but not immediately, but with a delay of a couple of seconds. If during the reduction of the block, hover the mouse over the block, the block must first return to its original position, and then increase. This is the challenge. I beg you to help me.

<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} ) } }) });

    2 answers 2

     $(function() { $('#block').hover( function(){ $(this).animate({width:200,height:200}); }, function(){ $(this).animate({width:100,height:100}); }); }); 
     #block { width:100px; height: 100px; border: 1px solid red; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div id="block"></div>

    and with a delay of a couple of seconds:

     $(function() { $('#block').hover( function() { $(this).animate({ width: 200, height: 200 }); }, function() { var k= $(this); setTimeout(function() { k.animate({ width: 100, height: 100 }); }, 2000); }); }); 
     #block { width: 100px; height: 100px; border: 1px solid red; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="block"></div>

    • Who immediately put me a minus? Here, edited the question. So I get it, only now, when I move the mouse over, the block immediately returns to its place. And in your example, the block returns after 2 seconds. to the place even when the cursor is over the block. - LADYX

    Use jquery.animate() to animate and setTimeout() to pause. But I advise you to first give an example of your code, no one will write it for you!

    • Who immediately put me a minus? Here, edited the question. So it works out for me, only now, when I remove the mouse cursor, the block immediately returns to its place, and it is necessary that it returns to its place after a couple of seconds. - LADYX