JQuery动画一些操作

最新推荐文章于 2025-03-06 10:12:18 发布

Gybk123

最新推荐文章于 2025-03-06 10:12:18 发布

阅读量168

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Gybk123/article/details/78471659

本文介绍如何利用jQuery库为网页中的图片实现多种动画效果，包括切换、显示隐藏、淡入淡出及自定义动画等。通过绑定按钮点击事件来控制图片的动画效果，为用户提供丰富的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>图片</title>
       <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
       <style type="text/css">
           img{
               width: 100px;
               height: 200px;
               /*自定义动画必须改变它的定位*/
               position: relative;
           }
       </style>

   </head>
   <body>
       <img src="img/a.jpg" id="img" /><br />
       <input type="button" id="qiehuan" value="切换" /><br />

       <input type="button" id="yinchang" value="隐藏" /><br />
       <input type="button" id="xianshi" value="显示" /><br />

       <input type="button" id="danru" value="淡入" /><br />
       <input type="button" id="danchu" value="淡出" /><br />

       <input type="button" id="zidingyi" value="自定义" /><br />
       <script type="text/javascript">
       //切换
           $("#qiehuan").click(function(){
               $("#img").toggle(1000);
           });
           //显示隐藏
           $("#yinchang").click(function(){
               $("#img").hide(2000);
           });
           $("#xianshi").click(function(){
               $("#img").show(2000);
           });
           //淡入淡出
           $("#danru").click(function(){
               $("#img").fadeIn(2000);
           });
           $("#danchu").click(function(){
               $("#img").fadeOut(2000);
           });
           //自定义动画
           $("#zidingyi").click(function(){
               $("#img").animate({
                   left:"200px",
               },2000);
           });
       </script>
   </body>
</html>