JQuery效果

最新推荐文章于 2024-09-24 09:00:00 发布

qq_41368899

最新推荐文章于 2024-09-24 09:00:00 发布

阅读量148

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_41368899/article/details/84844273

js 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍JQuery中实现元素显示、隐藏、淡入淡出、滑动及自定义动画的方法，包括使用JQuery提供的动画函数如fadeToggle(), slideDown(), animate()等，并解释了如何通过回调函数控制动画流程。

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

1.显示和隐藏

<html>
<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
        </script>
    <script type="text/javascript">
$(document).ready(function(){
  $(".ex .hide").click(function(){
    $(this).parents(".ex").hide("slow");
  });
});
    </script>
    <style type="text/css">
        div.ex {
            background-color: #e5eecc;
            padding: 7px;
            border: solid 1px #c3c3c3;
        }
    </style>
</head>

<body>

    <h3>中国办事处</h3>
    <div class="ex">
        <button class="hide" type="button">隐藏</button>
        <p>
            联系人：张先生<br />
            北三环中路 100 号<br />
            北京
        </p>
    </div>

    <h3>美国办事处</h3>
    <div class="ex">
        <button class="hide" type="button">隐藏</button>
        <p>
            联系人：David<br />
            第五大街 200 号<br />
            纽约
        </p>
    </div>

</body>
</html>

JQuery toggle（）
该方法可以在show()hide()之间切换

<html>
<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
        </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                $("p").toggle("slow");
            });
        });
    </script>
    </head>
<body>
    <button type="button">切换</button>
    <p>p1</p>
    <p>p2</p>
</body>
</html>

2.淡入淡出
fadetoggle()
$(selector).fadeToggle(speed,callback);
可选的 callback 参数是 fading 完成后所执行的函数名称

<html>
<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
        </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                $("#div1").fadeToggle("slow");
                $("#div2").fadeToggle("slow");
                $("#div3").fadeToggle();
            });
        });
    </script>
    </head>
<body>
  <button type="button">淡入淡出</button>
   <div id="div1"style="width:80px;height:80px;background-color:red;"></div>
    <div id="div2"style="width:80px;height:80px;background-color:green;"></div>
    <div id="div3"style="width:80px;height:80px;background-color:gold;"></div>
</body>
</html>

fadein淡入
fadeout淡出
fadeTo()方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
2.滑动
jQuery slideDown() 方法：向下滑动元素
语法：$(selector).slideDown(speed,callback);
slideUp():向上滑动元素
sildeToggle():

html>
<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
        </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".filp").click(function () {
                $(".panel").slideToggle("slow");
            });
        });
    </script>
    <style type="text/css">
        div.panel,p.filp{
            margin:0px;
            padding:5px;
            text-align:center;
            background:##ff0000;
            border:solid 1px #000000;
        }
        div.panel{
            height:120px;
            display:none;
        }
    </style>
    </head>
<body>
 <div class="panel">
     <p>1111111111</p>
     <p>22222222222</p>
 </div>
    <p class="filp">点击这里</p>
</body>
</html>

JQuery动画
animate()方法：用于创建自定义动画
语法
$(selector).animate({params},speed,callback)
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称.

<html>
<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
        </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                $("div").animate({ left: '250px' });
            });
        });
    </script>
  
    </head>
<body>
    <button>开始</button>
 <div style="background:#ff0000;height:10px;width:50px;position:absolute;">
    
 </div> 
</body>
</html>

停止动画
stop()方法用于在动画或效果完成前使其停止
语法
$(selector).stop(stopALL,gotoend)
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

<html>
<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
        </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#start").click(function () {
                $("div").animate({left:'100px'},5000);
            });
            $("#stop1").click(function () {
                $("div").stop();
            });
            $("#stop2").click(function () {
                $("div").stop(true);
            });
            $("#stop3").click(function () {
                $("div").stop(true, true);
            });
        });
    </script>

    </head>
<body>
    <button id="start">开始</button>
<button id="stop1">停止</button>
    <button id="stop2">停止所有</button>
    <button id="stop3">停止但要完成</button>
    <div style="background:#000000;height:100px;width:200px;position:absolute;">hello</div>
</body>
</html>

JQuery Callback函数
Callback 函数在当前动画 100% 完成之后执行
注：由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。
为了避免这个情况，您可以以参数的形式添加 Callback 函数。

<html>
<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
        </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                $("p").hide(1000, function () {
                    alert("the paragraph is now hidden");
                });
            });
        });
    </script>

    </head>
<body>
    <button type="button">Hide</button>
    <p>this is a paragraph with little content</p>
</body>
</html>

JQuery Chaning
Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。

<script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                $("p").css("color", "red").slideUp(2000).slideDown(2000);
            });
        });
    </script>