首页jquery 根据淡入淡出显示隐藏滑动动画做一个小案例

jquery 根据淡入淡出显示隐藏滑动动画做一个小案例

时间: 2024-09-06 09:02:30 浏览: 20

jQuery 的动画功能非常强大，可以轻松实现元素的淡入淡出显示隐藏以及滑动效果。下面是一个简单的示例，展示了如何使用 jQuery 实现元素的淡入淡出动画： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery淡入淡出与滑动动画</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> #fade-in-out { display: none; width: 200px; height: 200px; background-color: red; position: absolute; } </style> </head> <body> <div id="container"> <button id="show-hide">点击显示/隐藏淡入淡出</button> <div id="fade-in-out">淡入淡出区域</div> </div> <script> $(document).ready(function() { $("#show-hide").click(function() { var $target = $("#fade-in-out"); // 淡入动画 $target.fadeIn(1000, function() { // 持续时间较长的隐藏动画，如需更快可用 fadeOut() $target.delay(2000).fadeOut(1000); }); }); }); </script> </body> </html> ``` 在这个例子中，当你点击"显示/隐藏淡入淡出"按钮时，`#fade-in-out` 区域会从隐藏状态淡入，然后在两秒后淡出并再次隐藏。`fadeIn()` 和 `fadeOut()` 方法分别用于创建淡入和淡出的效果。