jQuery Effects
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

jQuery Effects

on

  • 824 views

 

Statistics

Views

Total Views
824
Views on SlideShare
824
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery Effects Presentation 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.