jQuery第三节---jQuery效果-优快云博客

本文介绍了jQuery中的动画效果实现方法，包括基本的显示隐藏效果、切换显示隐藏效果、自定义动画效果及淡入淡出效果等。并通过实例展示了如何使用hide(), show(), toggle(), animate(), fadeIn(), fadeOut()等方法。

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

jQuery效果显示隐藏

jQuery hide()和show()

语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

	<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="UTF-8">    <title>jQuery效果显示和隐藏</title>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script></head>
<body>
    <h3>jQuery学习第一节</h3>
    <button>点击隐藏我的过去</button>
    <div>
            别低头王冠会掉，相比鸡汤更爱毒鸡汤，<br>        <small>人一定要有梦想，与此同时要有信念与之相伴，我还差得很多，要很努力！</small>
        <p>
            匆匆的我走了，正如我匆匆的来！<br>
        $(document).ready(function () {            喜欢清醒，早早就看清了，所以少了很多可能！<br>
            我要做一个有战斗力的程序员！

        </p>
    </div>
    <script>
</body>            $("button").click(function () {
               $("p").parents("div").hide("slow");
            });
        });
    </script>
</html>

jQuery 切换显示和隐藏效果

jQuery toggle()方法

语法：

$(selector).toggle(speed,callback); 【可选的speed参数，规定显示或者是隐藏的速度，可以取"slow","fast",或者是毫秒

callback参数是toggle方法完成后所执行的函数】

显示被隐藏的元素并隐藏已显示的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>toggle特效</title>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body style="margin: 200px;">
    <div style="border: 1px solid gray ; cursor: pointer; width: 200px; height: 30px; line-height: 30px; background: yellowgreen; text-align: center;" ><b>点击我切换隐藏和显示</b></div>
    <p style="width: 200px; border: 1px solid gray; margin-top: 0; background: #028ecd; text-indent: 20px;">
        书山有路勤为径，学海无涯苦作舟
        宝剑锋从磨砺出，梅花香自苦寒来
        一寸光阴一寸金，寸金难买寸光阴
    </p>
    <script>
        $(document).ready(function () {
            $("div").click(function () {
               $("p").toggle();
            });
        });
    </script>
</body>
</html>

jQuery效果animate()方法

animate方法执行css属性集的自定义动画

该方法通过css将元素从一个状态改变为另一个状态，css属性值是逐渐改变的就可以常见动态效果！

只有数字值可以创建动画，使用’+=‘或者’-=‘来创建动画

语法：

$(selector).annimate(styles,speed,easing,callback);

styles必须规定产生动画效果的css样式和值

speed可选规定动画的速度！默认是nomal，毫秒，slow，fast

easing可选，规定在不同的动画中规定动画速度的easing函数

内置的easing函数swing linear

callback，可选animate执行完之后，要执行的函数！

jQuery效果queue()方法

queue方法显示或操作匹配在匹配元素上执行的函数对列

语法：

.queue(queueName)

queueName可选。字符串值，包含序列的名称。默认是fx，标准的效果序列

操作队列

queue()方法操作在匹配元素上的执行的函数对列

语法：queue(queueName,newQueue)

queue作用一句话解释其作用：改变其动画执行顺序，来达到想要展示的效果

dequeue效果作用保证动画的继续执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>queue</title>
    <script src="http://www.w3school.com.cn/jquery/jquery.js"></script>
    <style>
        div{ width: 40px; height: 40px;background: green; margin: 10px; position: absolute; left:0;top:30px;display: none;}
        .newcolor{ background: blue;}
    </style>
</head>
<body>
    <div></div>
    <script>
        $(document).ready(function () {
            // function animateT() {
                $("div").slideDown();
                $("div").animate({left:'+=200'},5000);
                $("div").queue(function () {
                    $(this).addClass("newcolor");
                    $(this).dequeue();
                });
                $("div").animate({left:'-=200'},1500);
                $("div").queue(function () {
                    $(this).removeClass("newcolor");
                    $(this).dequeue();
                });
                $("div").slideUp();

            // }

        });
    </script>
</body>
</html>