jQuery动画方法

作者: AdrianRD | 来源:发表于2016-10-20 13:37 被阅读47次

隐藏与显示


hide(speed,callback)
show(speed,callback)

隐藏和显示

  • speed 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
  • callback 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

示例:

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

toggle(speed,callback)

显示被隐藏的元素,并隐藏已显示的元素


淡入淡出


fadeIn()

fadeIn() 用于淡入已隐藏的元素。

fadeOut()

fadeOut() 方法用于淡出可见元素。

fadeToggle()

如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

fadeTo()

fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

滑动


slideDown()

slideDown() 方法用于向下滑动元素。

slideUp()

slideUp() 方法用于向上滑动元素。

slideToggle()

如果元素向下滑动,则 slideToggle() 可向上滑动它们。
如果元素向上滑动,则 slideToggle() 可向下滑动它们。

自定义动画


animate()

animate() 方法用于创建自定义动画。

示例:

$("div").animate({left:'250px'});

animate() - 操作多个属性

生成动画的过程中可同时使用多个属性

示例:

 $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });

animate() - 使用相对值

也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:

使用示例:

  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });

animate() - 使用预定义的值

您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"

示例:

  $("div").animate({
    height:'toggle'
  });

animate() - 使用队列功能

示例:

  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");

停止动画


stop(stopAll,goToEnd)

stop() 方法用于停止动画或效果,在它们完成之前。

  • stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
  • goToEnd 参数规定是否立即完成当前动画。默认是 false。

相关文章

  • JQuery动画,事件

    jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画。 语法...

  • jQuery动画队列

    jQuery 动画队列 当在jQuery对象上调用动画方法时,如果对象正在执行某个动画效果,那么新调用的动画方法就...

  • jQuery 动画队列

    jQuery 动画队列 动画队列的方法: 我们知道jQuery提供了以下几种方法来操作动画队列: stop([cl...

  • jQuery的动画特效

    1.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递...

  • jQuery |动画

    利用jQuery ,自己动手做动画。使用jQuery 的animate() 方法,制作动画。 语法: $(sele...

  • jQuery(动画篇)

    四、动画篇 1. 动画基础隐藏和显示 (1) jQuery中隐藏元素的hide方法 过 jQuery,您可以使用 ...

  • 动画队列

    动画 jQuery提供了几种动画的操作方法。 .hide([duration ] [,easing ] [,com...

  • JQuery动画队列

    动画队列 当在jQuery对象上调用动画方法时,如果对象正在执行某个动画效果,那么新调用的动画方法就会被添加到动画...

  • jQuery animate

    jQuery 动画 - animate() 方法 必需的 params 参数定义形成动画的 CSS 属性。可选的 ...

  • jQuery动画方法

    jQuery给我们提供了非常简单的动画设计方案。只要指定的属性是个连续值,我们就可以通过简单的指定初始状态、最终状...

网友评论

    本文标题:jQuery动画方法

    本文链接:https://www.haomeiwen.com/subject/zbefuttx.html