Learn

jQuery Image Animation

jquery_logo
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

I am going to show a very quick and easy way to create a simple image swap animation using jQuery when user mouse hovers on the image. It’s a very simple script you just need to declare a simple style and a simple jquery script.

First create simple css classes. Place this code between <head></head>

<style>

// This will be the main div which contains over both images a normal image and the image which we swap on mouse hover.
div.fadehover {
position: relative;
}

// This class will be used for the first image and I named it as “a” where as img is the component of the css/HTML.
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}

// This class will be used for the second image.
img.b {
position: absolute;
left: 0;
top: 0;
}
</style>

Let me explain this animation little bit so it could be easy for you guys to understand the code. In class named img.a i make its position as absolute and z-index is 10 so when the page load it will show the first image because we use z-index as 10. By default z-index is 1.

Now create the div in HTML to show the images.

<div class=”fadehover”>
<img src=”http://img.allw.mn/content/parenting/2013/04/1_tom-and-jerry.jpg” alt=”” class=”a” />
<img src=”http://static.indianexpress.com/pic/uploadedImages/bigImages/B_Id_351463_Tom.jpg” alt=”” class=”b” />
</div>

At the end, we need to create jquery script to do the final action.

Place this code at the bottom of your html page before </body>
<script src=”https://code.jquery.com/jquery-2.1.4.min.js”></script>
<script>
$(document).ready(function(){
$(“img.a”).hover(
function() {
$(this).stop().animate({“opacity”: “0”}, “slow”);
}, function() {
$(this).stop().animate({“opacity”: “1”}, “slow”);
});
});
</script>

In the above jquery script what it will do it, When any one mouse hover the image which has the class “a”, it will make its opacity to 0 using jquery.animate() function. Same when they move there mouse out of the image a, it will make the opacity again to 1.

Final file will be something like this

<html>
<head>

<style>

// This will be the main div which contains over both images a normal image and the image which we swap on mouse hover.
div.fadehover {
position: relative;
}

// This class will be used for the first image and i named it as “a” where as img is the component of the css/html.
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}

// This class will be used for the second image.
img.b {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class=”fadehover”>
<img src=”http://img.allw.mn/content/parenting/2013/04/1_tom-and-jerry.jpg” alt=”” class=”a” />
<img src=”http://static.indianexpress.com/pic/uploadedImages/bigImages/B_Id_351463_Tom.jpg” alt=”” class=”b” />
</div>

<script src=”https://code.jquery.com/jquery-2.1.4.min.js”></script>
<script>
$(document).ready(function(){
$(“img.a”).hover(
function() {
$(this).stop().animate({“opacity”: “0”}, “slow”);
}, function() {
$(this).stop().animate({“opacity”: “1”}, “slow”);
});
});
</script>
</body>
</html>

Any questions, comments, suggestions you are welcome to write.


  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Most Popular

To Top