Evri + Twine Evri & Twine join forces! Read more.

JavaScript client/server Development JavaScript client/server Development / Items

Jquery Basics Series - 2

Get Feed
Jquery Basics Series - 2
Description
Effects

Fading Out and In : $(selector).fadeOut() and $(selector).fadeIn()
Sliding Up and Down : $(selector).slideUp() and $(selector).slideDown()
Sliding Toggle : $(selector).slideToggle()
Custom animation effect : $(selector).animate() // I will discuss this in upcoming post.

Fading Effect
Fading Out and In the div tag id='box'. Here you can change the effect speed fadeOut(speed,callback) Eg. fadeOut("fast" or "slow"), fadeOut(300). Take a look at Live Demo
<script type="text/javascript">
$(function()
{

$('.fadeOut_box').click(function()
{
$('#box').fadeOut("slow");
//Sliding effect just replace fadeOut() to slideUp()
});

$('.fadeIn_box').click(function()
{
$('#box').fadeIn("slow");
//Sliding effect just replace fadeIn() to slideDown()
});

});
</script>
<body>
<a href="#" class="fadeOut_box">fadeOut()</a>
<a href="#" class="fadeIn_box">fadeIn()</a>
<div id="box"></div>
</body>
CSS code
#box
{
background-color:#96BC43;
border:solid 3px #333333;
height:160px;
margin-top:30px;
}

Attributes
Original URL
http://9lessons.blogspot.com/2009/11/jquery-basics-series-2.html#

Comments

Report This
Forgot your password?