发表于： 2020-01-13 22:18:21
1 1140
今日完成
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法：
总结:
1.淡入效果,一开始要设置隐藏,用的是display:none,运行后,隐藏元素淡出,相当于带有淡出效果的显示
2.淡出效果,就相当于带有淡出效果的隐藏(display:none)
3.它们的效果都是元素消失,不存在,所以代码执行时会对显示页面布局造成改变
4.如果不设置时间属性,元素淡入淡出效果不明显
5.造成的布局改变,会在完全淡入/淡出后才显示(没有过渡)
------------------------------------------------------------------------------------------------------------------
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
语法:
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeToggle() 方法：
总结:如图所示
------------------------------------------
jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
ex:
总结:
1.没有默认值,不设置过渡时间,会瞬间变换透明度
2.当透明度为0时,存在但是不可见(透明)
ps:
1.注意大小写，fadeIn() fadeOut() fadeToggle() fadeTo() 大小写不能变。
2.fadeTo() 没有默认参数，必须加上 slow/fast/Time
//--------------------------------------------------------------------------------------------------------------------------------------
jQuery 效果 - 滑动
jQuery 滑动方法可使元素上下滑动
jQuery 滑动方法
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
slideDown()
slideUp()
slideToggle()
--------------------------------------------------
jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。
语法:
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
ex:
jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑动元素。
语法:
$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
ex:
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
ex:
总结:
1.单一效果的向下滑动,就是有向下逐渐显示的,显示属性,起始要设置隐藏属性,display:none
2.单一效果的向上滑动,就是隐藏属性,不过是隐藏过程中,带有向上逐渐隐藏(类平移)的过渡效果
3.不设置滑动时间(过渡),如果对时间没有要求也可以,有默认的过渡时间,(不设置时间还是会出现滑动效果)
ps:
css属性的编辑方式
总结:
1.id名(类名)之间加个逗号(,),就可以同时为多个类设置同样的css样式
2.下面在单独设置某个类独有的样式,添加or覆盖
//-----------------------------------------------------------------------------------------------
jQuery 效果- 动画
jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
ex:
把 <div> 元素往右边移动了 250 像素
animate() - 操作多个属性
ex:
显示:略
jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
ex:
描述:相对原来长宽的基础上加了设定的值,例子中为放大
jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
ex:
描述:
height:'toggle',点击从下往上滑动隐藏,再次点击从上往下滑动出现(与直接设置toggle滑动效果一样)
width:'toggle',点击从右往左滑动隐藏,再次点击从左往右滑动出现(横向的滑动效果)
遇到问题:
如果我想设置与默认滑动方向相反,怎么设置?
返回列表
评论