How to Animate Div Width on Hover Using JQuery

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.


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


        width: 300px;
        height: 200px;
        background: #F00;
        border: 1px solid #44;


<script src=""></script>

    var boxWidth = $(".box").width();
  width: "400"
       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.