How to use fadeIn and fadeOut in jquery

36 views

simple way to use fadeIn fadeOut event in jquery

fadeIn( speed, callback )

speed-denotes speed of fadeIn either as {’slow’,'def’,'fast’} or in milliseconds as {2000}.

callback- function that will be executed after each and every animation.

same components used for.

fadeOut( speed, callback )

<style>
div { margin:3px; width:180px; display:none;
height:80px; float:left; background-color:red;}
span {display:none; margin:3px; text-align:left; color:white;}
</style>
<script type="text/javascript">$(document).ready(function(){
$(‘#start’).click(function(){
$("#div_box").fadeIn("slow",function recall(){
$(‘#span_content’).fadeIn("slow",function (){
$(‘#span_content’).fadeOut("slow");
recall();
});
});
});
$(‘#stop’).click(function(){
$(‘#span_content’).stop();
});
});
</script>
<body>
<a id="start" href="javascript:void(0)">Start</a> <a id="stop" href="javascript:void(0)">Stop</a>
<div id="div_box"><span id="span_content">computereducationworld</span></div>
</body>

« Scroll the page using javascript	Customise Your Fading Using fadeTo effect in jquery »
Posted on Monday, April 6th, 2009 at 4:02 pm under jQuery \| RSS 2.0 Feed

You must be logged in to post a comment.