jQuery动画效果

jQuery动画效果
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：vs· jQuery基础
作者： xqll
撰写时间：2019/5/8
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
下面我来演示一下 jquery动画效果
首先是要给它设置一下样子 然后在基础样式里面设置一下它的动画效果

<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div>

然后开始设置它的效果

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
 });
 });

这代码的意思是 当出发点击事件以后 前面设置的样子会渠道右边250px处；
效果图来看一下

一开始的话 是这样的
当我们触发了点击事件以后
得到的样子是

效果完成

当然 animate() 方法还可以操控多个元素
比如

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

以上代码的意思是 当触发点击事件以后 移至右边250px处
然后透明度变成 0.5，
宽和高 都变成200px
得到的样子是这样的

很明显可以看出 它透明度变低了 图像也变大了

几乎可以用animate() 方法来操作所有 CSS 属性
不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等
同时，色彩动画并不包含在核心 jQuery 库中
animate()的相对值
代码是

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

意思就是 每触发一次点击事件以后 它的宽和高就会比上一次 增加150px

点击越多次就会越大 无限循环

animate()使用队列功能
意思就是如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
上 代码解释

$(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");
           });
 });

意思就是说 它一开始变成 高是300px 透明的变成0.4，
然后宽变成300px 透明度变成0.8，
再到高变成100px 透明度变成0.4，
最后 宽变成100px，透明度变成0.8