jQuery

In jQuery we have three methods to give the fade effect to elements: fadeIn, fadeOut and fadeTo

This methods change the opacity of element with animation.

Syntax:

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

"speed" can be one of following values : "slow", "fast", "normal" or milliseconds

"opacity" specify the value that allows the fading to given opacity.

"callback" is the function which we want to run once the fading effect is complete.

For example

$("clickme").click(function(){

$("mydiv").fadeTo("slow",0.50);

});

$("clickme").click(function(){

$("mydiv").fadeOut(3000);

});.

The animate function is used to apply the custom animation effect to elements.

Syntax:

$(selector).animate({params}, [duration], [easing], [callback])

"param" defines the CSS properties on which you want to apply the animation.

"duration" specify how long the animation will run. It can be one of following values : "slow", "fast", "normal" or milliseconds

"easing" is the string which specify the function for the transition.

"callback" is the function which we want to run once the animation effect is complete.

For example:

<div id="clickToAnimate">

Click Me

</div>

<div id="mydiv" style="width:200px; height:300px; position: relative; right: 20px;">

</div>

Following is the jQuery to animate opacity, left offset, and height of the mydiv element

$('# clickToAnimate').click(function() {

$('#book').animate({

opacity: 0.30,

left: '+=20',

height: 'toggle'

}, 3000, function() {

// run after the animation complete.

});

});

When we want to fetch siblings of every elements in the set of matched elements then we can use siblings() method.

We filter the elements fetched by an optional selector.

Syntax : .siblings( [selector])

"selector" is the selector expression which specify the matched elements.

For example:

<ul>

<li> item 1 </li>

<li id="second_item"> item 2 </li>

<li class="myitem"> item 3 </li>

<li class="myitem"> item 4 </li>

</ul>

Now we want to find the siblings of the element of id "second_item" and change the text color to Blue :

$('li.second_item').siblings().css('color','blue');

If we want specific sibling elements for example the elements having class "myitem" then we can pass a optional selector:

$('li.second_item').siblings('.myitem').css('color','blue');