.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> JQuery >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Animate Images using JQuery

Posted By:Syed Shakeer Hussain       Posted Date: July 20, 2012    Points: 200    Category: JQuery    URL: http://www.dotnetspark.com  

The following exxample shows you how to resize the images when user moves the mouseover the iamge using Animate.Description .animte():- animate method takes the following attributesanimate( properties [, duration] [, easing] [, complete] ) properties A map of CSS properties
 

Introduction

The following exxample shows you how to resize the images when user moves the mouseover the iamge using Animate.

Description

.animte():- animate method takes the following attributes

animate( properties [, duration] [, easing] [, complete] )

properties A map of CSS properties that the animation will move toward.

durationA string or number determining how long the animation will run.

easingA string indicating which easing function to use for the transition.

completeA function to call once the animation is complete.

Expalnation:Add a Images in a <BODY> </BODY> with <img> and set Source of a image. Set the default height and width of a image.once you added your images you will get the below output when you run the html page.

when the user moves a mouser over the image it resizes  

Writing Jquery MouserOver script:

       $("img").mouseover(function()
        {
             var contentPanelId = jQuery(this).attr("id");
         
           var vl="#";
    var  varid=vl.concat(contentPanelId);
 
           $(varid).animate({width:350,height:350},"slow");
       
          
        })

Above $("img") is my image tag element name.

To get selected image id dynamically you have to use jQuery(this).attr("id");

To resize the Image set the Height and width by using .animate() .

when the user mouse out the image :-set the  defualt image height and width

mouseout JQuery Script:-

$("img").mouseout(function(){

  
    var contentPanelId = jQuery(this).attr("id");
         
           var vl="#";
    var  varid=vl.concat(contentPanelId);
 
           $(varid).animate({width:250,height:250},"slow"); });
   

JavaScript
<HTML> 
  <BODY> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
 </script> 
 <script type="text/javascript"> 
    $(document).ready(function() 
    { 
        $("img").mouseover(function() 
        { 
         var contentPanelId = jQuery(this).attr("id"); 
           var vl="#"; 
           var  varid=vl.concat(contentPanelId); 
     
      $(varid).animate({width:350,height:350},"slow"); 
         
            
        }) 
 
        $("img").mouseout(function(){     
         var contentPanelId = jQuery(this).attr("id"); 
           var vl="#"; 
         var  varid=vl.concat(contentPanelId); 
     
      $(varid).animate({width:250,height:250},"slow"); 
      }); 
         
 }); 
  
</script> 
 
  <BODY widht="990"> 
    <HEAD> 
<center> 
<div> 
  <a href="#"><img src="E:\image1.jpg" id="img2"  width="250" height="250"></a> 
  <a href="#"><img src="E:\image2.jpg" id="img1" width="250" height="250"></a> 
  <a href="#"><img src="E:\image3.jpg" id="img3" width="250" height="250"></a>  
</div> 
 
 </center> 
  
</HTML>

Note:please set your image path in src attribute, the image extension is .jpg

Thanks for reading my article !


 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend