JqueryNo Comments

default thumbnail

Using jQuery animate() method in combination with mouseenter() and mouseleave() methods, we can animate the width of a div on mouse enter. Take a look at the example, how to implement the below code.

HTML

<div class="box"></div>

CSS

.box{
        width: 300px;
        height: 200px;
        background: #F00;
        border: 1px solid #44;
    }

Jquery

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

$(document).ready(function(){
    var boxWidth = $(".box").width();
         $(".box").mouseenter(function(){
	     $(this).animate({
		width: "400"
		});
	      }).mouseleave(function(){
		  $(this).animate({
		     width: boxWidth
		  });
	      });
    });

Don’t forget to place the jquery.min.js file below the above script.

Hover the mouse on div to check the above code. If you have any issue, comment us in the comment box. Our experts will reply you as soon as possible.

Be the first to post a comment.

Add a comment