Fade in and Fade out effect for elements in Blogger blog

Jquery is the most popular Javascript framework .With jquery ,we don't need to work much for creating website effects as we did with Javascript . And in this post ,I will show you the way to create fade in / fade out effect for elements in website using Jquery . It look like hover effect which applied to links .



You can take a look in live demo
Steps to make this effect :
1, Open your Blog template and insert this code before </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
This code is for inserting Jquery framework into your blog
2,Insert this code after the code above :

<script type="text/javascript">
$(function() {
// OPACITY OF BUTTON SET TO 50%
$("element").css("opacity","0.5");
       
// ON MOUSE OVER
$("element ").hover(function () {
                                         
// SET OPACITY TO 100%
$(this).stop().animate({
opacity: 1.0
}, "slow");
},
       
// ON MOUSE OUT
function () {
           
// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0.5
}, "slow");
});
});
</script>

in this code , if you want to apply fade in /fade out effect to a specific element in your blog , replace element to id of this element .For example ,we have a div layout tag with id="div1" like this :
<div id="div1">
.....................content
................
</div>
to apply fade in/fade out effect to this div tag ,we change ' element ' to '#div1' like this :
<script type="text/javascript">
$(function() {
// OPACITY OF BUTTON SET TO 50%
$("#div1").css("opacity","0.5");
       
// ON MOUSE OVER
$("#div1").hover(function () {
                                         
// SET OPACITY TO 100%
$(this).stop().animate({
opacity: 1.0
}, "slow");
},
       
// ON MOUSE OUT
function () {
           
// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0.5
}, "slow");
});
});
</script>

And fade in/fade out effect will be applied to the div tag which id = "div1" (included all of its content)
If you want to apply this effect to many elements in your site ,you can make a class for elements you want ,and change "element" to " .name_of_class"
For example ,we want to add fade in/fade out effect to images in blog , we can add a class "fade" to all image elements like this :
<img src="url_image_1" class="fade"/>
<img src="url_image_2" class="fade"/>
<img src="url_image_3" class="fade"/>
<img src="url_image_4" class="fade"/>
And change "element" in script to ".fade" :

<script type="text/javascript">
$(function() {
// OPACITY OF BUTTON SET TO 50%
$(".fade").css("opacity","0.5");
       
// ON MOUSE OVER
$(".fade").hover(function () {
                                         
// SET OPACITY TO 100%
$(this).stop().animate({
opacity: 1.0
}, "slow");
},
       
// ON MOUSE OUT
function () {
           
// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0.5
}, "slow");
});
});
</script>


So Fade in/Fade out effect will be applied to all elements which have class="fade"
 I hope this post helpful to you . If you want more ,you can save the live demo and see the source code .
 If you see Blogger errors when saving the code ,you can encode the script in this post before inserting to template file . You can encode here .Just paste the script in this post to textarea and click on Encode ,then paste the result to template file .
Enjoy ^^