jquery常见事件动画

89 阅读 0 评论 59 点赞

我是靠谱客的博主大方哑铃，最近开发中收集的这篇文章主要介绍jquery常见事件动画，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、jquery事件

1、事件对象

$(document).click(function (ev) {
//不用考虑兼容，就通过事件处理函数的参数传入
    
//jq事件对象
    console.log(ev);
//原生对象
    console.log(ev.originalEvent);
// 鼠标相对于文档的距离
    console.log(ev.pageX, ev.pageY);
// 鼠标相对于屏幕可视区的距离
    console.log(ev.clientX, ev.clientY);
// 鼠标相对于触发事件的元素的左上角的距离
    console.log(ev.offsetX, ev.offsetY);
// 鼠标相对于屏幕的距离
    console.log(ev.screenX, ev.screenY);
// 相当于keyCode，比keyCode强大，还可以记录鼠标的键值，123(左中右);


    console.log(ev.which);


     console.log(ev.target); // 事件源

     console.log(ev.delegateTarget); // 事件绑定的对象

     console.log(ev.type); // 事件类型

     console.log(ev.ctrlKey); // 相应的功能键是否按下

     console.log(ev.shiftKey);

     console.log(ev.altKey);



     /*
    
      阻止冒泡：

        ev.stopPropagation()

        ev.cancelBubble = true

      阻止事件默认行为：

           return false

           ev.preventDefault();

           ev.returnValue = false

     */

     ev.preventDefault(); // 阻止默认事件

     ev.stopPropagation(); // 阻止冒泡的操作

     return false; // 阻止默认事件 + 阻止冒泡的操作


})

2.事件绑定

语法：$().on(事件类型，事件处理函数)

特点：可以给同一个元素的同一个事件添加不同的处理函数

可以同一个元素的不同事件添加同一个事件处理函数

可以同时添加多个事件

 function fun1() {

     alert(this);

 }

 function fun2() {

     alert("22");

 }

 //1.可以给同一个元素的同一个事件添加不同的处理函数

 /*$("div").on("click",fun1);

 $("div").on("click",fun2);*/


 //2.可以同一个元素的不同事件添加同一个事件处理函数

 //$("div").on("click mouseover",fun1); //多个事件之间用空格隔开


 //3.可以同时添加多个事件

/* $("div").on({

     "click":fun1,

     "mouseover":fun2,

     "mouseout":fun1,

 });*/



 //4.添加自定义事件

 $("div").on("abc",function () {

     alert("abc");

 });

 $("div").on("click",function () {

     $("div").trigger("abc"); //触发自定义事件

 })

3.事件委托

//1.事件委托 $(selector).on(事件类型，子元素，事件处理函数)

$("ul").on("click","li",function () {

    console.log(this); //this触发事件的对象  （子元素）

    $(this).css("background","green").siblings().css("background","");

});

4.事件取消

//$("p").off("click") //取消所有的点击事件

//$("p").off("click",fun2) //取消所有的点击事件

  //命名空间

  $("p").on("click.a",fun1);

  $("p").on("click.b",fun2);

  $("p").off("click.a")

5.one 添加的事件只会触发一次

$("p").one("click",function () {

        alert("fd");

    })

})

二、动画函数

1、hover

//hover(function(){},function（）{})

$("div").hover(function () {
    //移入时调用的函数
    $("div").css("background","green");
},function () {
    //移出时调用的函数
    $("div").css("background","red");

})

2.show（显示） hide（隐藏） toggle（和开关相同来回切换）

语法：show(speed,easing,callback)

Speed:动画时间

Easing：运动方式 linear swing

Callback：回调函数

3.fadeIn、fadeOut、fadeToggle、fadeTo

4.slideDown，slideUp，slideToggle

5.动画递归

递归：函数里面调用函数，前端培训递归函数中需要有一个结束递归的条件

eg：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="jquery.js"></script>    <style>        div{            width: 101px;            height: 300px;            background: pink;            float: left;            margin-right: 10px;            display: none;        }</style></head><body><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<script>    $("div:eq(0)").slideDown(400,function () {        //回调函数，动作做完以后执行的函数        $(this).next().slideDown(400,function () {            $(this).next().slideDown(400);        });    });

    $("div:eq(0)").slideDown(400,function next() {        //回调函数，动作做完以后执行的函数        $(this).next().slideDown(400,next);    });</script></body></html>

三、自定义动画animate

$().animate({动画参数},speed(默认400),easing,callback)


$().animate({动画参数},{options})

   speed - 设置动画的速度

   easing - 规定要使用的 easing 函数

   callback - 规定动画完成之后要执行的函数

   step - 规定动画的每一步完成之后要执行的函数

   queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始。

   specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

1、动画队列

//1.动画可以连缀，所有的动画都会加入到动画队列，按顺序执行
/*$("div").animate({"width":500})
      .animate({"height":500});*/

//2.可以直接使用show hide toggle
// $("div").animate({"width":"hide"});

 //3.css不是动画，不会加入到动画队列，会跟第一个动画一起执行
 /*$("div").animate({"width":500})
       .animate({"height":500})
    .css("background","pink")*/

 //4.手动加入动画队列
 /*$("div").animate({"width":500})
     .animate({"height":500})
     .queue(function () { //手动加入动画队列
        $(this).css("background","pink");
     })
     .animate({"opacity":0.2});//手动加入到动画队列中以后，

后面的队列就不会再执行了
 */

$("div").animate({"width":500})

     .animate({"height":500})

     .queue(function (next) { //手动加入动画队列

         $(this).css("background","pink");

         //$("div").dequeue(); 不建议使用

         next();

     })

     .animate({"opacity":0.2}); //手动加入到动画队列中以后，后面的队列就不会再执行了

2、stop

/*

 stop(clearQueue,gotoEnd)

 clearQueue:是否清除动画队列中所有动画，默认false

 gotoEnd：动画停止的时当前动画是否到达目标点 ，默认是false



 finish():所有的动画都到完成状态

*/

$("button:eq(0)").click(function () {

    $("div").animate({"width":500},1000)

         .animate({"height":500},1000);

})

$("button:eq(1)").click(function () {

   //$("div").stop(false,false);

    $('.box').finish(); //所有的动画都到完成状态 ，旧版本jquery没有这个而方法

})

3.延迟动画

$("button:eq(0)").click(function () {

    $("div").animate({"width":500},1000)

        .delay(5000) //动画延迟

        .animate({"height":500},1000);

})