Zoom image using JQuery example | How to zoom image using JQuery animate function (or) mouseover and mouseout

Zoom image using JQuery


Here i am showing example for zooming image using jQuery with animate function by using mouseover and mouseout event. Using JQuery we can able to do any magics on webpage. As part of that, this animation is one more magic. In next example i have shown how to move image from location to other location using JQuery animation, mouseover and mouseout funcations. In this example,

Get more Free Download JQuery PDF Books

After mouse over image will be 400 pxs. After mouse out image will be 300 pxs.

Output:



<html>
<head>
    <title></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            $("document").ready(function () {
                $("#MyImage").width(200);
                $('#MyImage').mouseover(function () {
                    $(this).animate({ width: "400" }, 'slow');
                    //$('#MyImage').animate({ marginLeft: "+=550px" }, 2000);
                });
                $('#MyImage').mouseout(function () {
                    //$('#MyImage').animate({ marginLeft: "-=550px" }, 2000);
                    $(this).animate({ width: "300" }, 'slow');
                });
            });
        
        </script>
</head>
<body>
<div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI6OtLPDaMMy25sKRLdgPSvQNikc_I4cK2CqJoKJADth1l8_leQz3jh8R41jlmY8vbDJ8YihtWxzYiuU1Ex69QShsknm176vdEqNfCDv7Q2uhosXUg7ag58vB9Kq3NXDrNRJYwbVYDAlkq/s1600/Word(docx)+to+pdf+in+c%23+docx+file.JPG" id="MyImage"/>
</div>
</body>
</html>

Please check JQuery Interview Questions, JQuery Form Validations and JQuery examples.

Share this post :

Post a Comment

Please give your valuable feedback on this post. You can submit any ASP.NET article here. We will post that article in this website by your name.

 
Support : Ranga Rajesh Kumar
Copyright © 2012. ASP.NET Examples - All Rights Reserved
Site Designed by Ranga Rajesh Kumar