Advanced Web Technologies

Chapter : 3
jQuery
submitted by:
kinjal patni
content
Introduction to JQUERY
JQUERY Effects
JQUERY and HTML
JQUERY Traversing
jQuery Effects
 jQuery Effects
 jQuery enables us to add effects on a web page. jQuery effects can be categorized into
fading, sliding, hiding/showing and animation effects.

jQuery Effects

Display Effect Fading Effect Sliding Effect Other Effect

Hide() Fadein() slideDown() animate()
Show() Fadeout() slideup() delay()
toggle() Fadetoggle() slideToggle()
Fadeto()
Display Effects
 jQuery hide()
 The jQuery hide() method is used to hide the selected elements.
Syntax:
 $(selector).hide();
 $(selector).hide(speed, callback);
 $(selector).hide(speed, easing, callback);
 speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales
are slow, fast and milliseconds.
 easing: It specifies the easing function to be used for transition.
 callback: It is also an optional parameter. It specifies the function to be called after
completion of hide() effect.
 jQuery show()
 The jQuery show() method is used to show the selected elements.
Syntax:
 $(selector).show();
 $(selector).show(speed, callback);
 $(selector).show(speed, easing, callback);
 speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales
are slow, fast and milliseconds.
 easing: It specifies the easing function to be used for transition.
 callback: It is also an optional parameter. It specifies the function to be called after
completion of show() effect.
 jQuery toggle()
 The jQuery toggle() is a special type of method which is used to toggle between the
hide() and show() method. It shows the hidden elements and hides the shown element.
Syntax:
 $(selector).toggle();
 $(selector).toggle(speed, callback);
 $(selector).toggle(speed, easing, callback);
 $(selector).toggle(display);
 speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales
are slow, fast and milliseconds.
 easing: It specifies the easing function to be used for transition.
 callback: It is also an optional parameter. It specifies the function to be called after
completion of toggle() effect.
 display: If true, it displays element. If false, it hides the element.
Fading Effects
 jQuery fadeIn()
 jQuery fadeIn() method is used to fade in the element.
 Syntax:
 $(selector).fadein();
 $(selector).fadeIn(speed,callback);
 $(selector).fadeIn(speed, easing, callback);
 speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales
are slow, fast and milliseconds.
 easing: It specifies the easing function to be used for transition.
 callback: It is also an optional parameter. It specifies the function to be called after
completion of fadein() effect.
 jQuery fadeOut()
 The jQuery fadeOut() method is used to fade out the element.
 Syntax:
 $(selector).fadeOut();
 $(selector).fadeOut(speed,callback);
 $(selector).fadeOut(speed, easing, callback);
 speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales
are slow, fast and milliseconds.
 easing: It specifies the easing function to be used for transition.
 callback: It is also an optional parameter. It specifies the function to be called after
completion of fadeOut() effect.
 jQuery fadeToggle()
 jQuery fadeToggle() method is used to toggle between the fadeIn() and fadeOut()
methods. If the elements are faded in, it will make them faded out and if they are
faded out it will make them faded in.
 Syntax:
 $(selector).fadeToggle();
 $(selector).fadeToggle(speed,callback);
 $(selector).fadeToggle(speed, easing, callback);
 speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales
are slow, fast and milliseconds.
 easing: It specifies the easing function to be used for transition.
 callback: It is also an optional parameter. It specifies the function to be called after
completion of fadeToggle() effect.
 jQuery fadeTo()
 jQuery fadeTo() method is used to fading to a given opacity(the quality of lacking
transparency).
 Syntax:
 $(selector).fadeTo(speed, opacity);
 $(selector).fadeTo(speed, opacity, callback);
 $(selector).fadeTo(speed, opacity, easing, callback);
 speed: It specifies the speed of the delay. Its possible vales are slow, fast and
milliseconds.
 opacity: It specifies the opacity. The opacity value ranges between 0 and 1.
 easing: It specifies the easing function to be used for transition.
 callback: It is also an optional parameter. It specifies the function to be called after
completion of fadeToggle() effect.
Sliding Effects
 jQuery slideDown()
 jQuery slideDown() method is used to slide down an element.
 Syntax:
 $(selector).slideDown(speed);
 $(selector).slideDown(speed, callback);
 $(selector).slideDown(speed, easing, callback);
 speed: It specifies the speed of the delay. Its possible vales are slow, fast and
milliseconds.
 easing: It specifies the easing function to be used for transition.
 callback: It is also an optional parameter. It specifies the function to be called after
completion of slideDown() effect.
 Let's take an example to demonstrate jQuery slideDown() effect.
 jQuery slideUp()
 jQuery slideup() method is used to slide up an element.
 Syntax:
 $(selector).slideUp(speed);
 $(selector).slideUp(speed, callback);
 $(selector).slideUp(speed, easing, callback);
 speed: It specifies the speed of the delay. Its possible vales are slow, fast and
milliseconds.
 easing: It specifies the easing function to be used for transition.
 callback: It is also an optional parameter. It specifies the function to be called after
completion of slideUp() effect.
 jQuery slideToggle()
 jQuery slideToggle () method is used to toggle between slideUp() and slideDown()
method. If the element is slide down, it will slide up the element and if it is slide up, it
will slide down.
 Syntax:
 $(selector).slideToggle(speed);
 $(selector).slideToggle(speed, callback);
 $(selector).slideToggle(speed, easing, callback);
 speed: It specifies the speed of the delay. Its possible vales are slow, fast and
milliseconds.
 easing: It specifies the easing function to be used for transition.
 callback: It is also an optional parameter. It specifies the function to be called after
completion of slideToggle() effect.
Other Effects
 jQuery animate()
 The jQuery animate() method provides you a way to create custom animations.
 Syntax:
 $(selector).animate({params}, speed, callback);
 Here, params parameter defines the CSS properties to be animated.
 The speed parameter is optional and specifies the duration of the effect. It can be set
as "slow" , "fast" or milliseconds.
 The callback parameter is also optional and it is a function which is executed after the
animation completes.
 jQuery delay()
 The jQuery delay() method is used to delay the execution of functions in the queue. It
is a best method to make a delay between the queued jQuery effects. The jQUery
delay () method sets a timer to delay the execution of the next item in the queue.
 Syntax:
 $(selector).delay (speed, queueName)
 speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales
are slow, fast and milliseconds.
 queueName: It is also an optional parameter. It specifies the name of the queue. Its
default value is "fx" the standard queue effect.