-
用动画和效果来装扮页面
普通类 -
- 支持
- 批判
- 提问
- 解释
- 补充
- 删除
-
-
使元素隐藏和显示
注意:效果应该是用来增强页面的可用性而不是妨碍它,因此切忌添加花里胡哨而无实用性的效果
关于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条)
聪明如你,不妨在这 发表你的看法与心得 ~