How To Add jQuery FadeIn and FadeOut Effect to Blogger

Posted by Lasantha Bandara on May 16th, 2009 File Under : java script, jquery0 Comment

If you want to add FadeIn and FadeOut effect to your blog, follow the steps below.

1.Log in to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the javascript code given below and click save.

<script type="text/javascript">
$(document).ready(function(){
$("#butFadeOut").click(function () {
$("#pFadeInOut").fadeOut(3000);
});

$("#butFadeIn").click(function () {
$("#pFadeInOut").fadeIn(3000);
});
});
</script>

<button id="butFadeOut">Fade Out</button>&nbsp;&nbsp;<button id="butFadeIn">Fade In</button>
<br />
<p id="pFadeInOut">Insert Your Content Here</p>

Note : Remember to replace 'Insert Your Content Here' with your real content.

Look at the example below.

Insert Your Content Here

File Under : java script, jquery

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.