jquery的animate({})动画整理

在网页制作的过程中少不了用到各种动画，形式多种多样，flash,css,js,canvas,等等都能实现，对于其优劣和效果只能说各有千秋。

什么是动画效果，其实网页中的渐变效果就是一种很基础的动画，动画的基础是时间效果，在规定的时间内完成什么效果。动画最关键的一点还是根据人类的视觉习惯而来，动的东西往往是心灵捕捉的对象。抓住用户的眼光，以动画为基础宣传自己迫切想表达的并且美化丰富界面内容，也算是动画的内涵了。

下面提到的是使用jQuery如何实现动画效果，动画的要素是动，move当然有需要对css的position属性进行一定的了解。然后就是时间参数，时间是确定动画效果的基础，然后就是运动轨迹，运动轨迹的确定就来源于今天我们学到的animate({})，不得不提的是jQ之所以盛行到今天还是有很多可取的功能，不单单是对于选择器的使用，其他工具函数和动画方法也很强大，基本上你能看到的网页动画效果它都可以帮助你实现。

下面先附上一个例子，写的很简单，新手制作有高手请斧正，谢谢！

html:

<p>点击动画</p>
<div class="ha">enheng</div>

css:

<style type="text/css">
p {
    background-color:rgba(240,210,210,1.00);
    width:70px;
    height:20px;
}
.ha {
    width:100px;
    height:100px;
    background-color:rgba(53,178,231,1.00);
    position:relative;
}
.cur {
    background-color:rgba(83,148,236,1.00);
}
.cur1  {
    background-color:rgba(37,213,23,1.00);
}
.cur2 {
    background-color:rgba(47,44,53,1.00);
}
</style>

jQ代码：

<script type="text/javascript" src="jq/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
    var ppap = $("p");
    var ddad = $(".ha");
    var i = 0;
    var m =100;
    var n =10;
    function My(i){
        ddad.animate({
            "left":m*i,
            "border-radius":n*i,
            });
        if(i>2,i<3){$(".ha").removeClass("cur2").addClass("cur");}
        else if(i>3,i<4){$(".ha").removeClass("cur").addClass("cur1");}
        else{$(".ha").removeClass("cur1").addClass("cur2");};
            };
    $("p").on("click",function (){
        i+=1;
        if(i>5){i=0};
        My(i);
        });
    timer = setInterval(function(){
        $("p").trigger("click").css("background","red");
        },1000);
    $(".ha").stop(true,true).mouseover(function (){
        clearInterval(timer);
        });
    $(".ha").stop().mouseout(function(){
        timer = setInterval(function(){
        $("p").trigger("click").css("background","red");
        },500);
        })
})
</script>

ps：首先我们想设计怎样的动画，这里简单举例，那就是点击p标签，然后下面的Div标签会向右移动，具体的是每次移动100像素移动5次，然后在加载完成后设置了setInterval（）让其可以自动开始，并且设置了条件，让他能够循环开始，下面我们拆解一下代码。

首先：定义了我们需要的参数ppap和ddad，别想多了我很时尚的，嗯哼，ppap，好的继续，然后我们定义了全局常量和变量，常量n/m变量i；

其次：我们新定义了一个函数My()，让他帮我们做一件事，什么事情呢，那就是ddad即Div标签的运动轨迹，animate({})。里面完成两件事left和border-radius两个属性值发生变化。里面有疑问请百度一下，谢谢。定义好之后，在adimate中可以设置动画的完成事件，这里我们并没有使用这个时间而是后面我们对其新建的定时器。

然后：我给P标签绑定一个点击事件，在里面我设置了变量的自动增加。和if（）{}条件函数，让变量i值不超过5，然后这样就会让我们的变量循环的动起来。

最后：给自定义的定时器绑定一个函数，帮我们做的事情呢，就是在我们不手动去点击p标签能够自动开始，然后调用trigger（）帮助我们去重复的激活给P元素绑定的点击事件。然后变量的值就会增加，返回给我们的My(i)，然后有偏移的举例就会增加，整个过程就循环的动起来了，继而我们给div绑定两个mouse鼠标事件，你们看到我换着花样对选择器的使用，我也是测试一下，这样会不会让代码出现问题，但是并没有，由此可见对选择器来说jQ的确很强大，他们完成的是悬停效果，划过停止，滑出继续开始动画。

到这里就结束了对整个动画的操作，动画很简单，也很复杂，具体看实际生活中我们怎么去运用它，我们用的很多的东西，导航，下拉，折叠，手风琴，百叶窗，拖放，焦点图等等很多的效果，都是一个对于这方面爱好的人员必定去了解和学习的东西，其实一门语言的运用会有很多相同之处，并且同一门语言解决一件动画也有很多种不同的方法，我们只是站在了别人的肩上，运作别人曾经设定好的东西，真的有一天我们自己有了新的发现那才叫创作，现在的最多叫做扩展延伸，甚至更低。

animate与css中的transition和transform也有很多的共同点，canvas属于Html5的东西，他的功能也足够强大，当然了js是其中的核心基础，原生的js现在看的比什么都重要，作为2017年的热门语言它还有很大的扩展性，还有很多的运用途径，这里也没有办法全部阐述，就先提到一点关于animate，引入后发现delay（），stop（），队列动画（），回调等等。太多的东西需要自己去一步步尝试和夯实，在接下来还要继续走向服务器，走向app，ui.......

jquery的animate({})动画整理

相关推荐