Your SlideShare is downloading. ×
jQuery Effects
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

jQuery Effects

444
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
444
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. jQuery Effects Basics - Fading - Sliding - Custom
  • 2. Basics■ jQuery hide() and show() With jQuery, you can hide and show HTML elements with the hide() and show() methods. Syntax: $(selector).hide(speed, callback); $(selector).show(speed, callback);
  • 3. Basics■ jQuery toggle() With jQuery, you can toggle between the hide() and show() methods with the toggle() method. Shown elements are hidden and hidden elements are shown. Syntax: $(selector).toggle(speed, callback);
  • 4. FadingWith jQuery you can fade an element in and out of visibility.■ jQuery fadeIn() The jQuery fadeIn() method is used to fade in a hidden element. Syntax: $(selector).fadeIn(speed, callback);
  • 5. FadingWith jQuery you can fade an element in and out of visibility.■ jQuery fadeOut() The jQuery fadeOut() method is used to fade out a visible element. Syntax: $(selector).fadeOut(speed, callback);
  • 6. FadingWith jQuery you can fade an element in and out of visibility.■ jQuery fadeToggle() The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods. If the elements are faded out, fadeToggle() will fade them in. If the elements are faded in, fadeToggle() will fade them out. Syntax: $(selector).fadeToggle(speed, callback);
  • 7. FadingWith jQuery you can fade an element in and out of visibility.■ jQuery fadeTo() The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1). Syntax: $(selector).fadeTo(speed, opacity, callback);
  • 8. SlidingWith jQuery you can create a sliding effect on elements.■ jQuery slideDown() The jQuery slideDown() method is used to slide down an element. Syntax: $(selector).slideDown(speed, callback);
  • 9. SlidingWith jQuery you can create a sliding effect on elements.■ jQuery slideUp() The jQuery slideUp() method is used to slide up an element. Syntax: $(selector).slideUp(speed, callback);
  • 10. SlidingWith jQuery you can create a sliding effect on elements.■ jQuery slideToggle() The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods. If the elements are slide down, slideToggle() will slide them up. If the elements are slide up, slideToggle() will slide them down. Syntax: $(selector).slideToggle(speed, callback);
  • 11. AnimationsThe jQuery animate() method is used to create custom animations.■ jQuery animate() Syntax: $(selector).animate({params}, speed, callback); The required params parameter defines the CSS properties to be animated. The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. The optional callback parameter is the name of a function to be executed after the animation completes.