The jQuery library provides several techniques for adding animation to a web page.These include simple, standard animations that are frequently used, and
the ability to craft sophisticated custom effects.
List of jquery effects :
.hide()
The " hide() " method hides the selected elements.
Tips: This is similar to the CSS property display:none.
example:
This is a testing div
Demo:
This is a testing div
.show()
The " show() " method shows the hidden, selected elements.
Tips: show() works on elements hidden with jQuery methods and display:none in CSS (but not visibility:hidden).
example:
This is a testing div
Demo:
This is a testing div
.toggle()
The " toggle() " method toggles between " hide() " and " show() " for the selected elements.
This method checks the selected elements for visibility. " show()" is run if an element is hidden. " hide() " is run if an element is visible - This creates a toggle effect..
example:
This is for checking toggle
Demo:
This is for checking toggle
jQuery Slide
Gradually change the height for selected elements
.slideDown()
The " slideDown() " method slides-down (shows) the selected elements.
Tips: slideDown() works on elements hidden with jQuery methods and display:none in CSS (but not visibility:hidden).
.slideUp()
The " slideUp() " method slides-up (hides) the selected elements.
Tips: Hidden elements will not be displayed at all (no longer affects the layout of the page).
.slideToggle()
The " slideToggle() " method toggles between " slideUp() " and " slideDown() " for the selected elements.
This method checks the selected elements for visibility. " slideDown() " is run if an element is hidden.
" slideUp() " is run if an element is visible - This creates a toggle effect..
example:
This is for checking toggle
Demo:
This is for checking toggle
jQuery Fade
Gradually change the opacity for selected elements
.fadeIn()
The " fadeIn() " method gradually changes the opacity, for selected elements, from hidden to visible (fading effect).
Tips: Hidden elements will not be displayed at all (no longer affects the layout of the page).
.fadeOut()
The " fadeOut() " method gradually changes the opacity, for selected elements, from visible to hidden (fading effect).
Tips: Hidden elements will not be displayed at all (no longer affects the layout of the page).
example:
This is for checking toggle
Demo:
This is for checking toggle
jQuery Custom Animations
The " animate() " method performs a custom animation of a set of CSS properties.
This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect.
Only numeric values can be animated (like "margin:30px"). String values cannot be animated (like "background-color:red").
example:
This is for checking animate
Demo:
This is for checking animate
Question for jquery selectors
How do I determine the state of a toggled element ?
Ans : You can determine whether an element is collapsed or not by using the :visible and :hidden selectors.
ex:-
var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');
How you animate the element which is visible ?
Ans : $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
JQUERY
