How to animate div width on mouse hover using jQuery

  410 views   10 months ago jQuery

Use the jQuery animate() method

You can simply use the jQuery animate() method in combination with the mouseenter() and mouseleave() methods to animate the width of a <div> element on mouseover.

Let's take a look at an example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Animate Div Width on Hover</title>
<style>
    .box{
        width: 200px;
        height: 150px;
        background: #f0e68c;
        border: 1px solid #a29415;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(document).ready(function(){
        var boxWidth = $(".box").width();
        $(".box").mouseenter(function(){
            $(this).animate({
                width: "400"
            });
        }).mouseleave(function(){
            $(this).animate({
                width: boxWidth
            });
        });
    });
</script>
</head>
<body>
    <p><strong>Note:</strong> Place mouse pointer over the box to play the animation.</p>
    <div class="box"></div>
</body>
</html>

 

Author : Harsukh Makwana
Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on harsukh21@gmail.com

Related Articles