Effects in Jquery
In jQuery, effects refer to a set of built-in methods that allow you to create dynamic changes to the appearance of elements on your page. These effects can help you manipulate the visibility, position, and animation of elements to create smooth transitions and interactions.
jQuery offers a variety of effects and animations that can make your website more interactive and visually appealing.
? Common jQuery Effects
| Effect Method | Description |
|---|---|
.hide() | Hides an element (sets display to none). |
.show() | Displays a hidden element (sets display to its default value). |
.toggle() | Toggles between hiding and showing an element. |
.fadeIn() | Gradually fades in an element. |
.fadeOut() | Gradually fades out an element. |
.fadeToggle() | Toggles between fading in and fading out an element. |
.slideDown() | Slides down an element (from top to bottom). |
.slideUp() | Slides up an element (from bottom to top). |
.slideToggle() | Toggles between sliding up and sliding down an element. |
.animate() | Custom animation on elements (move, resize, rotate, etc.). |
.stop() | Stops any ongoing animation on an element. |
.delay() | Delays the start of the next effect or animation. |
? 1. .hide() and .show()
.hide()
The .hide() method is used to hide an element by setting its display property to none.
"#hideBtn").click(function() { $("#box").hide(); });</script>
.show()
The .show() method is used to display a hidden element.
"#showBtn").click(function() { $("#box").show(); });</script>
? 2. .toggle()
The .toggle() method alternates between hiding and showing an element.
"#toggleBtn").click(function() { $("#box").toggle(); });</script>
Explanation:
The
#boxelement will toggle between visible and hidden states each time the#toggleBtnis clicked.
? 3. .fadeIn(), .fadeOut(), and .fadeToggle()
.fadeIn()
The .fadeIn() method gradually makes an element visible by changing its opacity from 0 to 1.
"#fadeInBtn").click(function() { $("#box").fadeIn(); });</script>
.fadeOut()
The .fadeOut() method gradually hides an element by changing its opacity from 1 to 0.
"#fadeOutBtn").click(function() { $("#box").fadeOut(); });</script>
.fadeToggle()
The .fadeToggle() method alternates between fading in and fading out an element.
"#fadeToggleBtn").click(function() { $("#box").fadeToggle(); });</script>
? 4. .slideDown(), .slideUp(), and .slideToggle()
.slideDown()
The .slideDown() method slides an element down, making it visible by changing its height from 0 to its natural height.
"#slideDownBtn").click(function() { $("#box").slideDown(); });</script>
.slideUp()
The .slideUp() method slides an element up, hiding it by changing its height from its natural value to 0.
"#slideUpBtn").click(function() { $("#box").slideUp(); });</script>
.slideToggle()
The .slideToggle() method alternates between sliding up and sliding down an element.
"#slideToggleBtn").click(function() { $("#box").slideToggle(); });</script>
? 5. .animate()
The .animate() method allows you to create custom animations by changing CSS properties over time.
Example of .animate():
"#animateBtn").click(function() { $("#box").animate({ width: "300px", // change width height: "300px", // change height opacity: 0.5 // change opacity }, 1000); // animation duration (in milliseconds) });</script>
Explanation:
The
#boxelement will animate itswidth,height, andopacityover a period of 1 second (1000 milliseconds).
? 6. .stop()
The .stop() method stops any currently running animation on an element.
"#startBtn").click(function() { $("#box").animate({ width: "500px", height: "500px" }, 5000); // animate over 5 seconds }); $("#stopBtn").click(function() { $("#box").stop(); // stop the animation });</script>
Explanation:
Clicking the Start Animation button starts an animation on the
#box, and the Stop Animation button will stop it at any point.
? 7. .delay()
The .delay() method allows you to add a delay before the next animation or effect is executed.
"#delayBtn").click(function() { $("#box").delay(1000).fadeOut().fadeIn(); // wait 1 second before fading out and then fading in });</script>
Explanation:
The
.delay(1000)introduces a 1-second delay before thefadeOuteffect begins.
? Summary
jQuery offers powerful methods to add dynamic effects and animations to your website:
.hide(),.show(),.toggle(): Control visibility..fadeIn(),.fadeOut(),.fadeToggle(): Control fading effects..slideDown(),.slideUp(),.slideToggle(): Control sliding effects..animate(): Custom animations on CSS properties..stop(): Stops ongoing animations..delay(): Adds a delay before executing an animation.
