jQuery动画特效

2024年1月27日 85次阅读 来源: HEternally

本文主要跟大家分享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动画执行完毕');
   });
});

注意：

  1. show与hide方法是修改元素的display属性，通过visibility属性修改需要通过css方法单独设置
  2. 如果样式中使用！important，比如display:none !important，想让.show()方法正常工作，必须使用.css(‘display’,’block !important’)重写样式。
  3. 如果让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）；停止动画，直接跳到第一个动画的最终状态。

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

    原文作者：HEternally
    原文地址: https://segmentfault.com/a/1190000010699660
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞