jQuery动画特效

张迁发布于2019-08-22 10:54 / 867人阅读

摘要：可选的参数规定效果的时长，它可以取以下值，或毫秒。五其他核心方法中停止动画方法用于停止动画或效果，在它们完成之前。默认是，即仅停止活动的动画，运行任何排入队列的动画向后执行。这些动画不会开始，知道第一个完成。

本文主要跟大家分享jQuery隐藏与显示（hide，show，toggle）上卷与下拉（slideDown，slideUp,slideToggle）淡入淡出（fadeOut，fadeIn，fadeToggle，fadeTo）自定义动画（animate,stop）

一、jQuery的隐藏和显示动画

在jQuery中，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

$("p").hide();
$("p").show();

当然，你可以给元素加上鼠标事件，例如当点击某个元素的时候，可以让它隐藏或者显示；

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

在jQuery中还有一种更方便的方法控制元素的隐藏和显示，即通过toggle()来回的切换hide()和show()方法；这样上面的代码就可以这样写：

$("button").click(function(){
  $("p").toggle();
});

当给这几个方法加入参数时，它们就会成为一个动画方法。我们就拿hide()方法举例:

$("p").hide(speed,callback);

hide()方法将会匹配元素的宽度，高度，以及不透明度，同时进行动画操作，快捷参数：.hide("fast/slow")：
例如：

$("button").click(function() {
   $("p").hide({
     duration:3000,
     complete:function() {
        alert("3000ms动画执行完毕")
     }
   });
});

或者：

$("button").click(function() {
   $("p").hide(3000,function() {
      alert("3000ms动画执行完毕");
   });
});

注意：

show与hide方法是修改元素的display属性，通过visibility属性修改需要通过css方法多带带设置

如果样式中使用！important，比如display:none !important，想让.show()方法正常工作，必须使用.css("display","block !important")重写样式。

如果让show与hide成为一个动画，那么默认执行动画会改变元素的高度，透明度；

二、上卷下拉效果

jQuery中下拉动画可以由slideDown()实现，
用法：$(selector).slideDown(speed,callback);

可选的speed参数规定效果的时长。它可以取以下值：“slow”，“fast”或毫秒值。

可选的callback参数是滑动完成后所执行的函数名称。

例：

$("button").click(function() {
  $("p").slideDown(3000);
});

同理的下拉动画可以由sildeUp()实现，它的语法也和上卷方法相似，同时还可以使用slideToggle()方法在sildeDown()与slideUp()方法之间切换。实现的方法也与上卷的相似，在这里我就不写出来了。

三、淡入淡出效果

jQuery的淡入淡出效果可以由fadeOut(),fadeIn()或者fadeToggle()实现，这里就介绍一下fadeOut()方法，其他两个也是相似的；

用法：$(selector).fadeOut(speed,callback);

可选的speed参数规定效果的时长。它可以取以下值：“slow”，“fast”或毫秒。

可选的callback参数是fading完成后所执行的函数名称。

例：

$("button").click(function() {
   $("#div1").fadeOut();
   $("#div2").fadeOut("slow");
   $("#div3").fadeOut(3000);
});

淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性，但是他们都有个共同的特点，变化的区间要么是0，要么是1，当opacity的值为0时，即隐藏该元素设置为display:none;

那么在这里就要介绍一个特殊的淡入效果fadeTo();
fadeTo()方法允许渐变为给定的不透明度(值介于0与1之间).

$(selector).fadeTo(speed,opacity,callback);

必须的speed参数规定效果的时长。它可以取以下值：“slow”，“fast”或毫秒。

jQuery中toggle与slideToggle以及fadeToggle的比较：

(1)toggle：切换显示与隐藏效果。
(2)sildeToggle：切换上下拉卷效果。
(3)fadeToggle：却还淡入淡出效果。

toggle与slideToggle细节区别：

(1) toggle:动态效果为从右至左，横向动作，toggle通过display来判断切换所有匹配元素的可见性；

(2)slideToggle：动态效果从下至上，竖向动作，slideToggle通过高度变化来切换所有匹配元素的可见性。

四、自定义动画

jQuery中动画由animation()方法实现。

用法：$(selector).animation({params},speed,callback);

必须的params参数定义形成动画的css属性，json写法。

可选的speed参数规定效果的时长，它可以取以下值：“slow”，“fast”或毫秒。

可选的callback参数是动画完成后所执行的函数名称。

例：

$(selector).click(function() {
  $("div").animation({
    left:"100px",
    opacity:"0.5",
    height:"150px",
    width:"150px"
    });
});

注意：

当使用animation()时，必须使用camel标记法书写所有的属性名，比如，必须使用paddingLeft而不是padding-left。

animation()使用相对值，可以定义相对值（该值相对于元素的当前值），需要在值的前面加上+=或-=；

例：

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

animation()使用队列功能，如果你在彼此之后编写多个animation（）调用，jQuery会创建包含这些方法调用的内部队列。然后逐一运行这些animation调用。

五、jQuery其他核心方法

jQuery中停止动画stop

stop（）方法用于停止动画或效果，在它们完成之前。stop()方法使用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画。

用法：$(selector).stop(stopAll,goToEnd);

可选的stopAll参数规定是否应该清除动画队列。默认是false，即仅停止活动的动画，运行任何排入队列的动画向后执行。

可选的goToEnd参数规定是否立即完成当前动画。默认是false。

因此，默认地，stop()会清除在被选元素上指定的当前动画。

(1)、stop()停止当前动画，点击在暂停处继续开始

(2)、stop(true);如果统一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，知道第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果goTOEnd参数提供true值，那么在队列的动画被删除并永远不会运行。

(3)、stop(true,true)；当前动画将停止，但该元素上的css属性被立刻改成动画的目标值。

例：

$("button").animation({
  height:300
},5000);

$("button").animation({
  width:300
},500);

$("button").animation({
  opacity:0.6
},5000);

分析：

（1）、stop（）；只会停止第一个动画，第二第三个继续；

（2）、stop（true）；停止所有动画；

（3）、stop（true，true）；停止动画，直接跳到第一个动画的最终状态。

谢谢大家阅读本文章，有什么建议都可以在评论中写出来，我会积极修改。

混合云 idc机房托管 jquery动画特效 html的动画特效 js动画特效案例 jquery特效

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91438.html

【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0
【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

Labradors 2019-08-05 15:50 评论0 收藏0
js 遮罩效果

摘要： -------------------------------tipswindown.js------------------------------ ///------------------------------------------------------------------------- //jQuery弹出窗口 By Await [2009-11-22] //-...

li21 2019-08-29 10:59 评论0 收藏0
js 遮罩效果

摘要： -------------------------------tipswindown.js------------------------------ ///------------------------------------------------------------------------- //jQuery弹出窗口 By Await [2009-11-22] //-...

caige 2019-08-19 18:45 评论0 收藏0
js 遮罩效果

摘要： -------------------------------tipswindown.js------------------------------ ///------------------------------------------------------------------------- //jQuery弹出窗口 By Await [2009-11-22] //-...

gnehc 2019-08-02 18:51 评论0 收藏0