Js jQuery动画反转

一. jQuery内置动画

jQuery一共有九种内置动画

内置动画一共有两个参数

1. 参数一为number类型，单位是毫秒数,默认都是400/String类型的单词表示normal普通速度(400),fast(200),slow(600)
2. 参数二是function类型的回调函数,表示在动画执行完毕自动执行的函数

1.1 显示

这里面涉及到三个函数

• show 显示

基本语法

$("#show").click(function () {
    //控制div显示
    $("#main").show('fast');
});

• hide 隐藏

基本语法

$("#hide").click(function () {
    $("#main").hide('slow',function () {
        console.log('hide动画执行完毕');
    });
});

• toggle 切换显示和隐藏

基本语法

/*jQuery1.9版本开始删除的切换功能*/
$("#toggle").click(function () {
    $("#main").toggle();
});

1.2 滑入滑出效果

• slideUp 滑出

基本语法

$("#sliderUp").click(function () {
    $("#main").slideUp();
});

• slideDown 滑入

基本语法

$("#sliderDown").click(function () {
    $("#main").slideDown();
});

• slideToggle 切换滑入滑出

基本语法

$("#toggleSlider").click(function () {
    $("#main").slideToggle();
});

1.3 淡入淡出效果

• fadeIn 淡入

基本语法

$("#fadeIn").click(function () {
    $("#main").fadeIn();
});

• fadeOut 淡出

基本语法

$("#fadeOut").click(function () {
    $("#main").fadeOut();
});

• fadeToggle 切换淡入淡出效果

基本语法

$("#toggleFade").click(function () {
    $("#main").fadeToggle();
});

1.4 其他函数

• fadeTo 指定透明度函数

指定透明度一共有四个参数

• 参数一：执行时间
• 参数二：指定透明度，可选值为0-1，0表示完全透明，1表示不透明
• 参数三：执行的效果方式，可选值有两个，swing表示缓动，是默认值，linear表示匀速
• 参数四：执行动画完毕后的回调函数

基本语法

$("#fadeTo").click(function () {
    $("#main").fadeTo(3000,.4,'swing',function () {
        console.log("透明度已经调整到40%");
    });
});

二. jQuery自定义动画

2.1 普通写法

jQuery自定义动画涉及的函数为animate函数

里面同样包含着四个参数

• 参数一：对象类型，设置要执行动画的css属性
• 参数二：速度，执行动画所需的时间,单位毫秒
• 参数三：执行效果，swing(缓速)，linear(匀速)
• 参数四：回调函数，动画执行完毕后自动调用的函数

基本语法

$("#d1").animate({left: "1000px",opacity: '.5'},3000,"linear",function () {
    console.log("自定义动画执行完毕");
});

这里面是让id为d1的jQuery对象三秒内匀速向左移动1000px，并且透明度变成50%，动画执行完毕后在控制台打印"自定义动画执行完毕"

在这里面设置css样式的时候有一种写法，就是+=的写法，这样的写法可以让再此当前效果下能够继续追加相同的效果

$("#toRight").click(function () {
    /*以+=的方式实现动画在当前效果下的继续追加能力*/
    $("#d2").animate({
        left: "+=200",
    },2000)
});

2.2 链式写法

链式写法涉及到一个队列动画的知识点，队列动画，顾名思义就是动画排着队执行，当执行到某个动画的时候就会执行，顺序执行

基本语法如下

$("#qu1").click(function () {
    /*使用回调函数来实现动画的队列效果*/
    $("div").animate({left: "400px"},1500,"swing",function () {
        $("div").animate({opacity: ".4"},1500,function () {
            $("div").animate({fontSize: "50px"},2000);
        });
    });
});

但是这种写法太过于冗杂

还有一种链式写法较为简便

$("#qu2").click(function () {
    /*使用链式编程来实现动画的队列效果*/
    $("div").animate({left: "200px"},1500)
        .animate({opacity: ".4"},1500).delay(3000)
        .animate({fontSize: "50px"},2000);
});

效果都是一样的

2.3 动画函数

• delay 延迟函数

这个函数里面只有一个参数，就是时间参数，这个参数的单位为毫秒

这个是延迟执行，大概就是让动画停一段时间然后再执行

基本语法

$("#qu3").click(function () {
    $("div").hide(3000).delay(5000).show(3000);
});

这上面的代码时div隐藏了3秒之后等待5秒然后显示出来

• stop 停止函数

stop函数有两个参数

1. 布尔类型：表示是否清除队列
2. 布尔类型：是否跳转到当前动画的最终结果

几种组合参数产生的效果

/*stop不传递任何参数等价于传递两个false,表示当前动画立即停止,自动执行下一个队列动画*/
$("div").stop(false,true);
/*立即完成当前动画,后续动画不会执行*/
$("div").stop(true,true);

/*终止动画,相当于暂停,该写法一般只用传递一个true*/
$("div").stop(true,false);

/*立即完成当前动画,后续动画继续执行*/
$("div").stop(false,true);

• finish 终止函数

这个终止函数直接到函数的终止位置

基本语法

/*专用的终止动画*/
$("div").finish();

三. jQuery的事件对象

jQuery事件对象大概就是类似于js对象里面的event对象

3.1 获取浏览器鼠标坐标

$("body").mousemove(function (ev) {
    console.log("基于屏幕左上角的坐标(浏览器窗口的左上角):x=" + ev.screenX + ",y=" + ev.screenY);
    console.log("基于页面左上角的坐标(不计算滚动条)/可视区域:x=" + ev.clientX + ",y=" + ev.clientY);
    console.log("基于页面左上角的坐标(计算滚动条):x=" + ev.pageX + ",y=" + ev.pageY);
    console.log("\n");
});
$("body").keydown(function (ev) {
    console.log(ev.keyCode);
});

这里面的坐标都是根据ev对象进行获取的，和js不同的是，他们获取的属性不同

3.2 绑定事件传参

$("div").on("click",{test: "测试一下"},function (ev) {
    /*ev.data获取事件绑定时传递的参数*/
    console.log(ev.data);
    console.log("你点的是div");
});

$("span").click(function (ev) {
    /*阻止事件的冒泡行为*/
    ev.stopPropagation();
    console.log("你点的是span标签");
});

$("#baidu1").click(function (ev) {
    //阻止百度的默认行为,比如a标签的跳转和submit按钮的提交
    ev.preventDefault();
    alert("你点击了a标签");
});
$("#baidu2").click(function (ev) {
    alert("你点击了baidu2标签");
    /*事件冒泡和标签默认行为都可以阻止*/
    return false;
});

上面有阻止事件的冒泡行为，还可以阻止浏览器跳转的默认行为，和submit按钮的提交行为

四. 补充jQuery相关函数

4.1 end函数

end函数是用来改变jQuery选择器的选择，恢复到上一个选择的内容上

/*链式操作时m,当发生选择器变化时,后续操作会自动匹配到已经变化的选择器上*/
/*使用end()函数来改变jq选择器的选择--恢复到上一次选择的内容上*/
$("#li3").css("color","red").siblings().css("color","yellow").end().click(function () {
    alert("你猜猜我是谁!");
});

4.2 each循环

each循环是jQuery中特有的一个循环，和foreach循环一样，里面有两个参数

• 参数一：index 获取到循环体的下标
• 参数二：element 获取到每个循环体对象

基本语法

$("li").each(function (index,element) {
    console.log(index);
    console.log(element);
    console.log($(element));
});

4.3 index函数

index函数是专门用来获取下标的函数

/*所有li中id未li3的下标值*/
console.log($("li").index($("#li3")));
console.log($("li").index(document.getElementById("li3")));
$("li").click(function () {
    console.log($(this).index());
});

/*index不传参的情况下自动获取是自己所在的范围中所有兄弟节点中的下标*/
console.log($("p").index());
console.log($("b").index());
/*index给定一个jq对象或dom对象后只会匹配能找到的对象中所在的第一个下标*/
console.log("111111111:" + $("b").index($("b")));

console.log($("#b2").index());
/*index参数给定一个选择器,返回#b2在所有b标签中的下标*/
console.log($("#b2").index("b"));

五. 总结

以上就是本篇博客的全部内容了，本篇博客主要讲的是jQuery的动画效果，有九种jQuery内置动画和一些自定义的动画效果，里面的参数基本都是对于css样式的操作，然后添加过渡效果，然后形成的动画，还有一些jQuery相关知识点的补充，有循环，获取下标等等的一些基本函数。
本人是一名刚开始学习前端的小白，目前学到了jQuery插件这一块，所以有些知识理解的可能不是很透彻，文章或多或少会有一些看法有误，大家发现了可以多多提出，大家一起学习，共同进步！