jQuery动画特效

浏览: 231 发布日期: 2017-08-17 分类: jquery

本文主要跟大家分享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);停止动画,直接跳到第一个动画的最终状态。

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

返回顶部