夜光带你走进Jquery（八）擅长的领域

最新推荐文章于 2019-12-03 19:43:35 发布

GeniusTeam-夜光

最新推荐文章于 2019-12-03 19:43:35 发布

阅读量140

点赞数

分类专栏： Genius-Jquery

本文链接：https://blog.csdn.net/weixin_41987706/article/details/102677472

版权

Genius-Jquery 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

夜光序言：

疏雨闲处，我也路过浮生无眠的夜晚。

只是单薄的心，解不出幕外的悲欢离散。

纵我不甘于改写，缘我选择了我的路，我当无悔于初心，更要无愧于未来--无端晚秋未晚，无由疏雨半疏，深阑如许，感受步步涟漪，一切灿烂轻盈。

正文：

jQuery 效果- 动画

jQuery animate() 方法

允许我们创建自定义的动画

jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建自定义动画。

语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。

它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

我们举个例子：

animate() 方法的简单应用。

它把 <div> 元素往右边移动了 250 像素：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").animate({left:'250px'});
            });
        });
    </script>
</head>

<body>
<button>夜光：开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
    如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

jQuery animate() - 操作多个属性

嗯唔~~

生成动画的过程中可同时使用多个属性：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").animate({
                    left:'250px',
                    opacity:'0.5',
                    height:'150px',
                    width:'150px'
                });
            });
        });
    </script>
</head>

<body>
<button>夜光：开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
    如果需要改变，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

jQuery animate() - 使用相对值

也可以定义相对值（该值相对于元素的当前值）。

我们需要在值的前面加上 += 或 -=：

之后每执行一次都是变大

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").animate({
                    left:'250px',
                    height:'+=50px',
                    width:'+=50px'
                });
            });
        });
    </script>
</head>

<body>
<button>夜光：开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
    如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

嗯唔：jQuery animate() - 使用预定义的值

我们

甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").animate({
                    height:'toggle'
                });
            });
        });
    </script>
</head>

<body>
<button>夜光：开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
    如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

嗯唔：jQuery animate() - 使用队列功能

默认地，jQuery 提供针对动画的队列功能。

在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。

然后逐一运行这些 animate 调用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                var div=$("div");
                div.animate({height:'300px',opacity:'0.4'},"slow");
                div.animate({width:'300px',opacity:'0.8'},"slow");
                div.animate({height:'100px',opacity:'0.4'},"slow");
                div.animate({width:'100px',opacity:'0.8'},"slow");
                //夜光：四个队列，依次执行
            });
        });
    </script>
</head>

<body>
<button>夜光：开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
    如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>