• 用动画和效果来装扮页面

    普通类
    • 支持
    • 批判
    • 提问
    • 解释
    • 补充
    • 删除
    • 使元素隐藏和显示

    注意:效果应该是用来增强页面的可用性而不是妨碍它,因此切忌添加花里胡哨而无实用性的效果

    关于display值的应用

    简单的命令应该需要记住下面几件事:

    • 如果元素在初始化的时候显性地将style的display属性设置成了none,那么在调用show()命令之后,元素的该值就总是被设置成block
    • 如果初始化的时候没有显示设置而是调用的jQuery的hide()命令实现的隐藏,那么调用show之后,元素会还原到display的原始状态。

    因此,尽量不要利用元素的style属性使元素隐藏,而应该在页面就绪程序里使用hide()命令

    实现可折叠的列表

    jQuery可以较方便地实现将有子项目的列表隐藏起来。通过选择器选择有子元素的元素,然后为该元素添加事件,事件中判断子元素的隐藏/显示情况进行相应的行为响应。

          

    切换元素的显示状态

    用toggle()命令能更加简单地实现上面的功能.     toggle() 方法切换元素的可见状态。 (如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。)

    • 以动画方式使函数显示和隐藏

    使元素逐渐的显示和隐藏

    完整的语法:

    • hide(speed,callback) //速度有slow、normal、fast三种,callback是回调函数(回调函数可选)
    • show(speed,callback) //速度有slow、normal、fast三种,callback是回调函数(回调函数可选)
    • toggle(speed,callback) //速度有slow、normal、fast三种,callback是回调函数(回调函数可选)

    使元素淡出和淡入

    • fadeout(speed,callback)  // 将非隐藏的元素的不透明度逐渐降低到0%,然后从显示器上删除
    • fadeIn(speed,callback)    //通过把元素的不透明度提高到初始值,是隐藏的匹配元素显示出来
    • fadeTo(speed,opacit,callback)  //从当前设置到opacity所指定的新设置,调整已包装元素的不透明度

    使元素滑上和滑下

    • slideDown(speed,callback)            //从上往下逐渐扩大元素的垂直面积,使已隐藏的匹配元素显示出来
    • slideUp(speed,callback)            //从下往上逐渐缩小元素的垂直面积,使非隐藏的匹配元素隐藏
    • slideToggle(speed,callback)            //在隐藏的元素上执行slideDown,在显示的元素上执行slideUp

    使动画停止

    stop()      //停止当前正在运行的、包装集里的元素的所有动画

    • 创建自定义的动画

    animate(properties,duration,easing,callback)

    animate(properties,options)

    • properties  (对象) 一个散列对象,指定在动画结束时所支持的CSS样式应该达到的终值
    • duration    (数字|字符串) slow 、normal或fast  如果省略,则不会产生动画
    • easing       (字符串) 用来实现动画的缓和效果,必须通过注册,jQuery提供了linear和swing两个,前者是线性的联系操作,后者是接近动画结束时稍微加速
    • callback      回调函数
    • options       利用一个散列对象指定动画的参数值,支持的属性如下   duration、easing、complete(动画完成后调用的函数)、queue(如果为false,动画不会加入队列而立即运行)

    eg 一个自定义的放大动画

    $('.animateMe').each(function(){

    $(this).animate({

    width:$(this).width() *2,

    height:$(this).height() *2;

    },2000

    );

    })

    上面的例子 中 红色 部分是properties参数,所以这就是散列对象的格式

     

    • 标签:
    • 显示
    • 元素
    • 效果
    • 动画
    • callback
    • 函数
    • 隐藏
    • speed
  • 加入的知识群:
    学习元评论 (0条)

    评论为空
    聪明如你,不妨在这 发表你的看法与心得 ~



    登录之后可以发表学习元评论
      
暂无内容~~
顶部