JQuery——动画效果

时光·漫步zth

于 2019-04-16 16:40:54 发布

阅读量125

点赞数

分类专栏： JQuery 文章标签： JQuery 动画效果

本文链接：https://blog.csdn.net/qq_41573234/article/details/89330022

版权

JQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 隐藏与显示

语法:

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

2. 淡入和淡出

$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
fadeTo() 方法中 speed、opacity 必需。

3. 滑动

$(selector).slideDown(speed,callback); 向下滑动元素
$(selector).slideUp(speed,callback); 向上滑动元素
$(selector).slideToggle(speed,callback); 上下滑动之间切换

4. 动画

$(selector).animate({params},speed,callback); 用于自定义动画

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称
默认地，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名
使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=
使用预定义的值:把属性的动画值设置为 "show"、"hide" 或 "toggle"
jQuery 提供针对动画的队列功能

5. callBack 回调方法

当动画 100% 完成后，即调用 Callback 函数。

6. 暂停动画

$(selector).stop(stopAll,goToEnd); 用于停止动画或效果，在它们完成之前。

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>JQuery 动画</title>
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            /*隐藏和显示*/

            $("#hide").click(function () {
                $("#p1").hide();
            });
            $("#show").click(function () {
                $("#p1").show();
            });
            $("#showHide").click(function () {
                $("#p1").toggle("slow");
            });

            /*-淡入淡出*/
            $("#fadeIN").click(function () {
                $("#div1").fadeIn();
                $("#div2").fadeIn("slow");
                $("#div3").fadeIn(3000);
            });

            $("#fadeOut").click(function () {
                $("#div1").fadeOut();
                $("#div2").fadeOut("slow");
                $("#div3").fadeOut(3000);
            });
            $("#fadeInOut").click(function () {
                $("#div1").fadeToggle();
                $("#div2").fadeToggle("slow");
                $("#div3").fadeToggle(3000);
            });
            $("#fadeTo").click(function () {
                $("#div1").fadeTo("slow",0.1);
                $("#div2").fadeTo("slow",0.4);
                $("#div3").fadeTo("slow",0.8);
            });

            /*滑动*/
            $("#flip").click(function () {
                $("#panel").slideToggle("slow");
            });

            /*动画*/
            $("#animate_btn").click(function () {
                $("#animate_div").animate({
                    left:'100px',
                    opacity:'0.5',
                    height:'150px',
                    width:'150px'
                    },3000
                );
            });

            $("#stop").click(function () {
                $("#animate_div").stop();
            });
            
        });
    </script>
</head>
<body>
<center>
    <%--隐藏和显示--%>
    <p id="p1">点击“隐藏”、“显示”按钮</p>
    <button id="show" type="button">显示</button>
    <button id="hide" type="button">隐藏</button>
    <button id="showHide" type="button">显示\隐藏</button><br/><br/>

    <%--淡入淡出--%>
        <button id="fadeIN" type="button">淡入</button>
        <button id="fadeOut" type="button">淡出</button>
        <button id="fadeInOut" type="button">淡入\淡出</button><br/><br/>
        <button id="fadeTo" type="button">淡化</button>
        <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
        <br>
        <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
        <br>
        <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

        <%--滑动--%>
    <p id="flip" style="margin: 0px ;padding: 5px;text-align: center;background-color: antiquewhite;
border: 1px red solid ;width: 300px">滑动</p>
    <div id="panel" style="margin: 0px ;padding: 5px;text-align: center;background-color: antiquewhite;
border: 1px red solid; height: 120px;width: 300px;display: none">
        <p>纵有红颜，百生千劫</p>
        <p>难消君心，万古情愁</p>
    </div>


    <%--动画--%>
    <button id="animate_btn" type="button">开始动画</button>
        <button id="stop" type="button">暂停动画</button>
    <div id="animate_div" style="background: antiquewhite;height: 80px;width: 80px;position: absolute"></div>
    
</center>
</body>
</html>

时光·漫步zth

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery——动画效果

1. 隐藏与显示语法: $(selector).hide(speed,callback); $(selector).show(speed,callback); $(selector).toggle(speed,callback);可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是隐藏或显示完...
复制链接

扫一扫