第九周学习周记

最新推荐文章于 2021-06-19 16:16:59 发布

cjy1602

最新推荐文章于 2021-06-19 16:16:59 发布

阅读量199

点赞数 1

分类专栏：我的HTML学习周记笔记文章标签：队列 html

本文链接：https://blog.csdn.net/cjy1602/article/details/116945975

版权

我的HTML学习周记同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

笔记

5 篇文章 0 订阅

订阅专栏

第九周学习周记

前言
一、如何创建动画
二、animate各种属性
总结

前言

动画效果

一、如何创建动画

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

它的语法是：$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'150px'});
  });
});
</script>

这个动画可以移动方块的位置
在这里插入图片描述

animate还可以操作多个属性
如下面这段代码：

<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
  });
});
</script>

运行结果
在这里插入图片描述

二、animate各种属性

1.使用相对值

可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

这样图片就会一直无限相对放大

2.使用预定义的值

可以把属性的动画值设置为 “show”、“hide” 或 “toggle”：

<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      height:'toggle'
    },"fast");
  });
});
</script>

3.使用队列功能

默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用：

<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>

还可以这样

<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");  
    div.animate({left:'100px'},"slow");
    div.animate({fontSize:'3em'},"slow");
  });
});
</script>
<body>
<button>开始动画</button>
<div>
style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

</body>

在这里插入图片描述

总结

几乎可以用 animate() 方法来操作所有 CSS 属性,不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同时，色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画，您需要从 jquery.com 下载颜色动画插件。

默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!