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动画方法

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