Image movement using JQuery Example using animate, mouseover and mouseout functions

In my previous example i have explained how to zoom image using JQuery animate, mouseover and mouseout functions. In this example i am how to move image from left to right on mouseover and right to left on mouse out.
 <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 () {
                    $('#MyImage').animate({ marginLeft: "+=100px" }, 1000);
                });
                $('#MyImage').mouseout(function () {
                    $('#MyImage').animate({ marginLeft: "-=100px" }, 1000);
                });
            });
        
        </script>
</head>
<body>
<div>
<img src="http://3.bp.blogspot.com/-6P-vVYQ1i4E/T6H1OUfsPfI/AAAAAAAAAGI/1x7HswvivVA/s1600/Word(docx)+to+pdf+in+c%23+docx+file.JPG" id="MyImage"/>
</div>
</body>
</html>
Output:
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