首页 > 软件开发 > JQUERY >

jQuery动画效果制作

来源:互联网 2023-03-16 23:54:52 版权归原作者所有,如有侵权,请联系我们

jQuery动画效果制作DyG办公区 - 实用经验教程分享!

工具/原料

  • jQuery

方法/步骤

  • 1

    1、基本效果(显示与隐藏)DyG办公区 - 实用经验教程分享!

    1)show():显示DyG办公区 - 实用经验教程分享!

    2)show(speed,[callback]) :以动画效果显示DyG办公区 - 实用经验教程分享!

    3)hide():隐藏DyG办公区 - 实用经验教程分享!

    4)hide(speed,[callback]) :以动画效果隐藏DyG办公区 - 实用经验教程分享!

    5)toggle() :切换显示或隐藏DyG办公区 - 实用经验教程分享!

    6)toggle(switch) :显示或隐藏,如果switch为true代表显示,false隐藏(了解)DyG办公区 - 实用经验教程分享!

    7)toggle(speed,[callback]):以动画效果显示或隐藏DyG办公区 - 实用经验教程分享!

    参数说明:DyG办公区 - 实用经验教程分享!

    speed:动画的速度,可以是"slow"(缓慢), "normal"(正常), "fast"(快速)DyG办公区 - 实用经验教程分享!

    也可以理解为动画的持续时间,单位为毫秒。DyG办公区 - 实用经验教程分享!

    [callback]:动画完成时所触发的回调函数DyG办公区 - 实用经验教程分享!

    DyG办公区 - 实用经验教程分享!

    示例代码:DyG办公区 - 实用经验教程分享!

    jQuery动画效果制作DyG办公区 - 实用经验教程分享!

    jQuery动画效果制作DyG办公区 - 实用经验教程分享!

  • 2

    2、滑动效果(上下滑动)DyG办公区 - 实用经验教程分享!

    •slideDown(speed,[callback]) :以动画效果向下滑动DyG办公区 - 实用经验教程分享!

    •slideUp(speed,[callback]) :以动画效果向上滑动DyG办公区 - 实用经验教程分享!

    •slideToggle(speed,[callback]) :以动画效果滑动DyG办公区 - 实用经验教程分享!

    参数说明:DyG办公区 - 实用经验教程分享!

    speed:动画的持续时间,单位为毫秒DyG办公区 - 实用经验教程分享!

    [callback]:动画完成时所触发的回调函数DyG办公区 - 实用经验教程分享!

    DyG办公区 - 实用经验教程分享!

    示例代码:DyG办公区 - 实用经验教程分享!

    jQuery动画效果制作DyG办公区 - 实用经验教程分享!

    jQuery动画效果制作DyG办公区 - 实用经验教程分享!

  • 2此文章未经授权抓取自百度经验
  • 3

    3、淡入淡出效果DyG办公区 - 实用经验教程分享!

    •fadeIn(speed,[callback]) :以动画效果淡入DyG办公区 - 实用经验教程分享!

    •fadeOut(speed,[callback]) :以动画效果淡出DyG办公区 - 实用经验教程分享!

    •fadeTo(speed,opacity,[callback]) :设置元素的透明度0(全透明)-1(不透明)之间DyG办公区 - 实用经验教程分享!

    参数说明:DyG办公区 - 实用经验教程分享!

    speed:动画的持续时间DyG办公区 - 实用经验教程分享!

    opacity:元素的透明度,0(全透明)1(不透明)DyG办公区 - 实用经验教程分享!

    [callback]:动画完成时所触发的回调函数DyG办公区 - 实用经验教程分享!

    示例代码:DyG办公区 - 实用经验教程分享!

    jQuery动画效果制作DyG办公区 - 实用经验教程分享!

    jQuery动画效果制作DyG办公区 - 实用经验教程分享!

  • 4

    4、自定义动画效果DyG办公区 - 实用经验教程分享!

    animate(params,[speed], [fn]) :创建自定义动画DyG办公区 - 实用经验教程分享!

    参数说明:DyG办公区 - 实用经验教程分享!

    params:json对象,动画参数DyG办公区 - 实用经验教程分享!

    [speed]:动画的持续时间DyG办公区 - 实用经验教程分享!

    [fn]:动画完成时所触发的回调函数DyG办公区 - 实用经验教程分享!

    jQuery动画效果制作DyG办公区 - 实用经验教程分享!

  • 5

    5.案例01:使用自定义动画仿好123左侧导航DyG办公区 - 实用经验教程分享!

    jQuery动画效果制作DyG办公区 - 实用经验教程分享!

    jQuery动画效果制作DyG办公区 - 实用经验教程分享!

    jQuery动画效果制作DyG办公区 - 实用经验教程分享!

  • 6

    6.案例02:一组图片的淡入淡出DyG办公区 - 实用经验教程分享!

    jQuery动画效果制作DyG办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!DyG办公区 - 实用经验教程分享!


    标签: JQUERY软件

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号