<title>jQuery Effects Demo</title> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <style> body{ font-family: Arial, sans-serif; margin:40px; } #box{ width:250px; height:120px; background:#4CAF50; color:white; text-align:center; line-height:120px; font-size:22px; margin-top:20px; } button{ padding:10px 18px; margin:5px; } </style> <script> $(document).ready(function(){ // Hide the box $("#hide").click(function(){ $("#box").hide(); }); // Show the box $("#show").click(function(){ $("#box").show(); }); // Fade effect $("#fade").click(function(){ $("#box").fadeToggle(); }); // Slide effect $("#slide").click(function(){ $("#box").slideToggle(); }); }); </script>

jQuery Effects Demonstration

This page demonstrates several jQuery effects including Hide, Show, Fade Toggle, and Slide Toggle. The jQuery library makes these animations simple using only one line of code.

Hide Show Fade Slide

Hello jQuery!