二零二三年 优质公开课fadeIn和fadeOut.pptxVIP

北京电子科技职业学院fadeIn()和fadeOut()ContentsfadeIn()方法一二fadeOut()方法与hover区别三目录1fadeIn()方法fadeIn()方法定义和用法fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。注释隐藏的元素不会被完全显示（不再影响页面的布局）提示该方法通常与 fadeOut() 方法一起使用。fadeIn()方法基本语法：$(selector).fadeIn(speed,callback)参数解析：speed:可选。规定元素从隐藏到可见的速度。默认为 “normal”。可能的值：毫秒 （比如 1500），“slow”、“normal”、fast在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其透明度（这样会创造淡入效果）。fadeIn()方法callback:可选。fadeIn 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。fadeIn()方法使用speed参数button class=btn1淡入/buttonp这是一个段落。/p$(document).ready(function(){ $(.btn1).click(function(){ $(p).fadeIn(1000); });});fadeIn()方法使用callback参数button class=btn1淡入/buttonp这是一个段落。/p$(document).ready(function(){ $(.btn1).click(function(){ $(p).fadeIn(1000,function(){ alert(fadeIn()方法已完成！); }); });});2fadeOut()方法fadeOut()方法定义和用法fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。注释隐藏的元素不会被完全显示（不再影响页面的布局）。提示该方法通常与 fadeIn() 方法一起使用。fadeOut()方法基本语法：$(selector).fadeOut(speed,callback)参数解析：speed:可选。规定元素从可见到隐藏的速度。默认为 “normal”。可能的值：毫秒 （比如 1500），“slow”、“normal”、fast在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其透明度（这样会创造淡出效果）。fadeOut()方法callback:可选。fadeOut 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。注释：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。fadeOut()方法使用speed参数button class=“btn2”淡出/buttonp这是一个段落。/p$(document).ready(function(){ $(.btn2).click(function(){ $(p).fadeOut (1000); });});fadeIn()方法使用callback参数button class=“btn2”淡出/buttonp这是一个段落。/p$(document).ready(function(){ $(.btn2).click(function(){ $(p).fadeOut(1000,function(){ alert(fadeOut ()方法已完成！); }); });});3与hover区别0201与hover区别首先 fadeIn 、fadeOut 是淡入,淡出事件, 可以用任何方式来触发,比如单击元素, 双击元素, 悬停元素等。hover(function1,function2) 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。fadeIn 、fadeOut 已经预定义了触发事件后,元素的效果为淡入,淡出。hover没有规定,也就是说我们可以在function1,function2(分别为鼠标悬停和鼠标离开事件) 事件中,做任何想做的事情,当然包括淡入淡出效果。北京电子科技职业学院谢 谢 观 看