jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
With jQuery you can fade an element in and out of visibility.
jQuery has the following fade methods:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
Syntax:
$(selector).fadeIn(speed,callback);
- The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
- The optional callback parameter is a function to be executed after the fading completes.
The jQuery fadeOut() method is used to fade out a visible element.
Syntax:
$(selector).fadeOut(speed,callback);
- The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
- The optional callback parameter is a function to be executed after the fading completes.
By using jQuery we can animate with the images.
Step 1:
Add jQuery CDN on your page.
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>
Step 2:
Add appropriate CSS in the page. Better ways to create CSS file externally and include it on your page.
<style>
.img_outer {
width: 310px;
height: 344px;
position: relative;
float: left;
margin: 10px;
}
.img_outer img {
position: absolute;
z-index: 1;
cursor: pointer;
}
.img_blur {
opacity: 0.84;
}
</style>
Step 3:
Now add multiple images in the page. So that we can implement this effect on multiple images.
<body style="height: 1000px">
<div class="list_leftp">
<div class="img_outer">
<a href="#" data-hr="http://parthhdave.blogspot.in/">
<img src="image_1.jpg" width="310" height="400" />
</a>
</div>
<div class="img_outer">
<a href="#" data-hr="http://parthhdave.blogspot.in/">
<img src="image_2.jpg" width="310" height="400"/>
</a>
</div>
<div class="img_outer">
<a href="#" data-hr="http://parthhdave.blogspot.in/">
<img src="image_3.jpg" width="310" height="400"/>
</a>
</div>
<div class="img_outer">
<a href="#" data-hr="http://parthhdave.blogspot.in/">
<img src="image_4.jpg" width="310" height="400" />
</a>
</div>
</div>
</body>
The data-hr attribute is defined for assigning a link to <a>. Read the concept of data attribute for more detail.
Step 4:
Now the main step, we have to write jQuery script for implementing effect.
<script type="text/javascript">
$(document).ready(function(e) {
$('img').hover(function() {
$('.img_outer img').addClass('img_blur');
$(this).removeClass('img_blur').animate({
'left': '-10px',
'top': '-10px',
'width': '330px'
});
}, function() {
$('.img_outer img').removeClass('img_blur');
$(this).animate({
'left': '0',
'top': '0',
'width': '310px'
});
});
$(document).on('click', 'a', function(event) {
var x = $(this).attr('data-hr');
$(this).find('img').fadeOut(700).fadeIn(700, function(event) {
window.open(x, "_blank");
});
event.preventDefault();
});
});
</script>
Now I am going to explain this code.
On hower event of an Image img_blur class is added for opacity for an image. After this step, left, top and width properties are set to animate an image.
Once these properties are set, remove that particular class and reset all those properties to their default values.
Remaining lines of code are for redirection and fade in/fade out the effect of an image.
When you click on the image (<a>), value of a data-hr attribute is stored in variable x. In the step, we have set time for fade in & fade out effect in milliseconds.
Guys, hope you understand the concept. Please take help from attached code if you require. If you have any query, feel free to ask me.
Source Code
Source Code
