Fade in and Fade out effect for elements in Blogger blog

Posted: 28 Jan 2010 01:15 AM PST 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 ^^