jQuery Sliding Effect
FREE
Overview
Web pages can have effects applied to them, thanks to jQuery. Fading, sliding, hiding/showing, and animation are the several types of jQuery effects. There are various methods in jQuery for creating effects on a web page.
Transform Your Career
Choose from our industry-leading programs designed for career success
Modern Software and AI Engineering Program
Master full-stack development with AI integration
+1000 moreModern Data Science and ML with specialisation in AI
Advanced data science techniques with AI specialization
+1000 moreAdvanced AIML with Specialisation in Agentic AI
Deep dive into AIML with focus on Agentic systems
+1000 moreDevOps, Cloud & AI Platform Engineering
Build and manage AI-powered cloud infrastructure
+1000 moreAI Engineering Advanced Certification by IIT-Roorkee
Premier AI engineering certification from IIT-Roorkee
Introduction to Sliding Effects
jQuery effects enhance the interactivity of your website. jQuery offers a trivially simple interface for performing numerous spectacular effects such as show, hide, fade-in, fade-out, slide-up, slide-down, toggle, and so on.
We can easily apply commonly used effects with minimal preparation using jQuery methods. The Slide effect can be combined with the show/hide/toggle controls. This removes the element from the viewport.
List of jQuery Sliding Effects
You can slide an HTML element up and down using jQuery. The following methods can be used to conceal and show an HTML element with a sliding effect.
- slideUp()
- slideDown()
- slideToggle()
jQuery slideUp() Method (Syntax + Examples)
With a sliding motion, hide the matched parts. The .slideUp() method animates the height of the components that have been matched.
Lower portions of the page appear to glide up, concealing the items. The display style property is set to none whenever the height reaches 0 (or, if specified, whatever the CSS min-height value is) to guarantee that the element no longer influences the page's layout.
Durations are indicated in milliseconds; greater values indicate slower animations rather than faster animations. The strings 'quick' and 'slow' denote periods of 200 and 600 milliseconds, respectively.
If no additional string is supplied, or if the duration parameter is omitted, the duration parameter's default value of 400 milliseconds is used.
Syntax:
Method Parameters:
- duration: A text or number that specifies how long the animation will last.
- easing: A string indicating which transition easing function to employ.
- complete: Once the animation is finished, run this procedure once per each matching element.
Example:
The parent paragraph is animated to glide up, and the animation is completed in 200 milliseconds. When the animation is finished, an alert is displayed.
You can see the output by running the above code on a browser. The elements slide up and get hidden when you click on them.
jQuery slideDown() Method (Syntax + Examples)
With a sliding motion, display the matched parts. The .slideDown() method animates the height of the corresponding items. Lower areas of the page glide down, making room for the disclosed things.
Durations are indicated in milliseconds; greater values indicate slower animations rather than faster animations. The strings 'quick' and 'slow' denote periods of 200 and 600 milliseconds, respectively.
If no additional string is supplied or the duration parameter is omitted, the duration parameter's default value of 400 milliseconds is used.
Syntax:
Method Parameters:
- duration: A text or number that specifies how long the animation will last.
- easing: A string indicating which transition easing function to employ.
- complete: Once the animation is finished, run this procedure once per each matching element.
Example:
Output
You can see the output by running this code on a browser. The elements slide down and get displayed when you click on the "Click me" section.
Scaler Placement Report and Statistics
Scaler learners achieved 2.5x salary growth with average post-Scaler CTC reaching ₹23L.
jQuery slideToggle() Method (Syntax + Examples)
Using a sliding motion, show or hide the matched parts. The .slideToggle() method animates the height of the corresponding items. Lower portions of the page appear to slide up and down, revealing or concealing the items. If the element is initially visible, it will be hidden; if it is not visible, it will be shown.
As needed, the display property is saved and restored. If an element with an inline display value is hidden and subsequently shown, it will be displayed inline again. When the height hits 0 following a concealing animation, the display style attribute is set to none to ensure that the element no longer influences the page layout.
Durations are indicated in milliseconds; greater values indicate slower animations rather than faster animations. Strings 'quick' and 'slow' can be used.
Syntax:
Method Parameters
- duration: A text or number that specifies how long the animation will last.
- easing: A string indicating which transition easing function to employ.
- complete: Once the animation is finished, run this procedure once per each matching element.
Example:
All paragraphs are animated to glide up and down, with the animation taking 600 milliseconds to complete.
You can see the output by running this HTML code on any browser. When you click the "Toggle" button, you will see the toggle effect on the paragraph.
Conclusion
- In this article, we have jQuery learned jQuery sliding effects, types of sliding effects, and different methods.
- jQuery provides several methods to apply sliding effects such as slideUp(), slideDown(), slideToggle(), etc.
- You can use these jQuery effects to add some functionalities to your web applications.
Google
Amazon
Microsoft
Flipkart
Adobe1200+ more