jquery常用动画(show/hide/slideDown/slideUp/fadeIn/fadeOut/fadeTo/自定义动画/停止动画)详解...

最新推荐文章于 2024-07-16 16:43:05 发布

SimminonGarcia

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量680

点赞数

文章标签： javascript json python ViewUI

原文链接：https://my.oschina.net/yxmBetter/blog/829971

版权

2019独角兽企业重金招聘Python工程师标准>>>

动画操作也是jquery一个很突出的点，特别方法，赶紧学习一下吧：

动画

jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。

动画的显示和隐藏

+_ show()_:让匹配的元素展示出来

//第一种： 带参，一个参数，数值，毫秒值。
$("button:eq(0)").click(function () {
    //显示盒子
    $("div").show(1000);  //所有属性在1秒内变为初始化值。display: block;
});
//第二种；   带参，一个参数，字符串，slow,normal,fast。600/400/200
$("button:eq(0)").click(function () {
    //显示盒子
    $("div").show("normal");  //所有属性在1秒内变为初始化值。display: block;
});
//第三种；   带参，两个参数，时间和回调函数
$("button:eq(0)").click(function () {
    //显示盒子
    $("div").show(1000, function () {
        alert("动画执行完毕！");
        $("div").hide();
    });  //所有属性在1秒内变为初始化值。display: block;
});
//第四种；  无参，类似$("div").css("display","block");
$("button:eq(0)").click(function () {
    //显示盒子
    $("div").show();  //所有属性在1秒内变为初始化值。display: block;
	$("div").css("display","block");  //所有属性在1秒内变为初始化值。display: block;
});

hide():让匹配的元素隐藏掉

//第一种；带参，一个参数，数值，毫秒值。
$("button:eq(1)").click(function () {
    //隐藏盒子
    $("div").hide(1000);  //所有属性在1秒内变为初始化值。display: block;
});
//第二种；   带参，一个参数，字符串，slow,normal,fast。600/400/200
$("button:eq(1)").click(function () {
    //隐藏盒子
    $("div").hide("fast");  //所有属性在1秒内变为初始化值。display: block;
});
//第三种；   带参，两个参数，时间和回调函数
$("button:eq(1)").click(function () {
    //隐藏盒子
    $("div").hide(1000, function () {
        alert("动画执行完毕！");
        $("div").show();
    });  //所有属性在1秒内变为初始化值。display: block;
});
//第四种；  无参，类似$("div").css("display","none");
$("button:eq(1)").click(function () {
    //隐藏盒子
    $("div").hide();  //所有属性在1秒内变为初始化值。display: block;
    $("div").css("display","none");  //所有属性在1秒内变为初始化值。display: block;
});

toggle():切换匹配的元素

//第一种；   带参，一个参数，数值，毫秒值。
$("button:eq(2)").click(function () {
    //切换盒子状态
    $("div").toggle(1000);  //切换
});
//第二种；   带参，一个参数，字符串，slow,normal,fast。600/400/200
$("button:eq(2)").click(function () {
    //切换盒子状态
    $("div").toggle("fast");  //切换
});
//第三种；   带参，两个参数，时间和回调函数
$("button:eq(2)").click(function () {
    //切换盒子状态
    $("div").toggle(1000, function () {
        alert("动画执行完毕！");
    });  //切换
});
//第四种；  无参
$("button:eq(2)").click(function () {
    //切换盒子状态
    $("div").toggle();  //切换
});

动画的滑入和滑出

滑入_slideDown()_：让元素以下拉动画效果展示出来

//第一种；   带参，一个参数，数值，毫秒值。
$("button:eq(0)").click(function () {
    //滑入
    $("div").slideDown(1000);
});
//第二种；   带参，一个参数，字符串，slow,normal,fast。600/400/200
$("button:eq(0)").click(function () {
    //滑入
    $("div").slideDown("fast");
});
//第三种；   带参，两个参数，时间和回调函数
$("button:eq(0)").click(function () {
    //滑入
    $("div").slideDown(1000, function () {
        alert("动画执行完毕！");
    });
});
//第四种；  无参
$("button:eq(0)").click(function () {
    //正常速度滑出
    $("div").slideDown();
});

滑出_slideUp()_:让元素以上拉动画效果隐藏起来

//第一种；   带参，一个参数，数值，毫秒值。
$("button:eq(1)").click(function () {
    //滑出
    $("div").slideUp(1000);
});
//第二种；   带参，一个参数，字符串，slow,normal,fast。600/400/200
$("button:eq(1)").click(function () {
    //滑出
    $("div").slideUp("fast");
});
//第三种；   带参，两个参数，时间和回调函数
$("button:eq(1)").click(function () {
    //滑出
    $("div").slideUp(1000, function () {
        alert("动画执行完毕！");
    });
});
//第四种；  无参
$("button:eq(1)").click(function () {
    //正常速度滑出
    $("div").slideUp();
});

切换_slideToggle()_:滑入滑出切换动画效果

//第一种；   带参，一个参数，数值，毫秒值。
$("button:eq(2)").click(function () {
  //切换
  $("div").slideToggle(1000);
});
//第二种；   带参，一个参数，字符串，slow,normal,fast。600/400/200
$("button:eq(2)").click(function () {
  //切换
  $("div").slideToggle("fast");
});
//第三种；   带参，两个参数，时间和回调函数
$("button:eq(2)").click(function () {
  //切换
  $("div").slideToggle(1000, function () {
      alert("动画执行完毕！");
  });
});
//第四种；  无参
$("button:eq(2)").click(function () {
    //切换
    $("div").slideToggle();
});

动画的淡入和淡出和淡至

淡入_fadeIn()_:让元素以淡淡的进入视线的方式展示出来

//第一种；   带参，一个参数，数值，毫秒值。
$("button:eq(0)").click(function () {
    //淡入
    $("div").fadeIn(1000);
});
//第二种；   带参，一个参数，字符串，slow,normal,fast。600/400/200
$("button:eq(0)").click(function () {
    //淡入
    $("div").fadeIn("fast");
});
//第三种；   带参，两个参数，时间和回调函数
$("button:eq(0)").click(function () {
    //淡入
    $("div").fadeIn(2000, function () {
        alert("动画执行完毕！");
    });
});
//第四种；  无参
$("button:eq(0)").click(function () {
    //正常速度淡入
    $("div").fadeIn();
});

淡出_fadeOut()_:让元素以渐渐消失的方式隐藏起来

//第一种；   带参，一个参数，数值，毫秒值。
$("button:eq(1)").click(function () {
    //淡出
    $("div").fadeOut(1000);
});
//第二种；   带参，一个参数，字符串，slow,normal,fast。600/400/200
$("button:eq(1)").click(function () {
    //淡出
    $("div").fadeOut("fast");
});
//第三种；   带参，两个参数，时间和回调函数
$("button:eq(1)").click(function () {
    //淡出
    $("div").fadeOut(2000, function () {
        alert("动画执行完毕！");
    });
});
//第四种；  无参
$("button:eq(1)").click(function () {
    //正常速度淡出
    $("div").fadeOut();
});

切换_fadeToggle()_:通过改变透明度，切换匹配元素的显示或隐藏状态

//第一种；   带参，一个参数，数值，毫秒值。
$("button:eq(2)").click(function () {
    //切换
    $("div").fadeToggle(2000);
});
//第二种；   带参，一个参数，字符串，slow,normal,fast。600/400/200
$("button:eq(2)").click(function () {
    //切换
    $("div").fadeToggle("fast");
});
//第三种；   带参，两个参数，时间和回调函数
$("button:eq(2)").click(function () {
    //切换
    $("div").fadeToggle(1000, function () {
        alert("动画执行完毕！");
    });
});
//第四种；  无参
$("button:eq(2)").click(function () {
    //正常速度切换
    $("div").fadeToggle();
});

注意：除此之外，fade还有一个是淡至，改变透明度到某个值。与淡入淡出的区别：淡入淡出只能控制元素的不透明度从完全不透明到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！
淡至_fadeTo()_:调节匹配元素的不透明度

//第一种；
$("button:eq(3)").click(function () {
    //正常速度切换
    $("div").fadeTo(1000,0.5);
});
//第二种；
$("button:eq(3)").click(function () {
    //正常速度切换
    $("div").fadeTo(1000,0.5, function () {
        alert("动画执行完毕！");
    });
});

动画总结

自定义动画

所有能够执行动画的属性必须只有一个数字类型的值。
- 要改变字体大小，要使用：fontSize（font-size），不要使用：font

//一种；   带参，两个或三个参数，json时间和回调函数。
$("button:eq(0)").click(function () {
    var json1 = {"width":50,"height":50,"border-radius":25,"top":300,"left":300}
    var json2 = {"width":100,"height":50,"border-radius":0,"top":100,"left":30,"
background":"red"}
    //两个或三个参数，json时间和回调函数。
    $("div").animate(json1,2000, function () {
        $("div").animate(json2,2000, function () {
            alert("函数执行完毕！");
        });
    });
});

停止动画

stop():停止当前正在执行的动画
如果一个以上的动画方法在同一个元素上调用，那么对这个元素来说，后面的动画将被放到效果队列中。这样就形成了动画队列。（联想：排队进站）
动画队列里面的动画不会执行，直到第一个动画执行完成。

// 第一个参数表示是否清空所有的后续动画
// 第二个参数表示是否立即执行完当前正在执行的动画
// 第一个参数表示后续动画是否要停止
//（true:后续动画不执行;false:后续动画会执行）
// 第二个参数表示当前动画是否执行完完毕
//（true:立即执行完成当前动画  ;false:立即停止当前动画）
$(selector).stop(clearQueue,jumpToEnd);

看一看

//滑入滑出
$("button:eq(0)").click(function () {
    //正常速度滑出
    $("div").slideToggle(2000);
});
//停止动画
$("button:eq(1)").click(function () {
    //停止动画,什么都不写，默认为两个参数都是false；
    //当前动画立刻停止，后续动画照样执行。
    $("div").stop();
    // 第一个参数表示后续动画是否要停止
    //（true:后续动画不执行;false:后续动画会执行）
    // 第二个参数表示当前动画是否执行完完毕
    //（true:立即执行完成当前动画;false:立即停止当前动画）
    //false，false； 后续动画会执行，立即停止当前动画
    $("div").stop(false,false);
    //false，true； 后续动画会执行，立即执行完成当前动画
    $("div").stop(false,true);
    //true，false； 后续动画不执行，立即停止当前动画
    $("div").stop(true,false);
    //true，false； 后续动画不执行，立即执行完成当前动画
    $("div").stop(true,true);
});

如果元素动画还没有执行完，此时调用sotp()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。

注意点

为了避免冒泡，使用mouseenter和mouseleave代替mouseover和mouseout。
opacity透明度和rgba透明度有什么不同？
- opacity作用于元素，以及元素内所有内容的透明度。
- rgba只作用于元素的颜色或者背景色。设置rgba透明的元素的子元素不会继承透明效果。
show()/hide()/slideDown()/slideUp()/fadeIn()/fadeOut()/fadeTo()不会把之前定义的方法层叠掉，先定义的先执行。

如果本文有什么错误，欢迎留言指正！希望看到本文的您，看完本文会您有所帮助！如果觉得还不错，点个赞哦！

转载于:https://my.oschina.net/yxmBetter/blog/829971