河南中医药大学：《Web前端开发》课程理论教学课件（2017）13.jQuery效果

jQuery效果 管理科学与工程学科 耿方方

jQuery效果 管理科学与工程学科 耿方方

主要内容 显示与隐藏 滑动 淡入淡出 自定义动画 动画效果综述

主要内容  显示与隐藏  滑动  淡入淡出  自定义动画  动画效果综述

jQuery中众多的动画与特效方法为提高页面的用户体验带来了极大的 方便,通过少量几行代码,就可以实现元素的飞动、淡入淡出等动画 效果,还可以自定义各种动画效果

 jQuery中众多的动画与特效方法为提高页面的用户体验带来了极大的 方便，通过少量几行代码，就可以实现元素的飞动、淡入淡出等动画 效果，还可以自定义各种动画效果

显示与隐藏 在页面中,元素的显示与隐藏是使用最频繁的操作,在传统的 JavaScript中,一般通过改变元素显示的方式实现 document.getE1 ementById(“p1”). style. di splay=”b1ock” 隐藏 document. getElementById(“p1”).sty1e. display=”none”; 在 jQuery中实现显示与隐藏的方式更为简单 show()与hide() 上面的代码就等同于 $(“p1”).css(“ display”,” block”) $(“p1”).css(“ display”,”none”);

显示与隐藏  在页面中，元素的显示与隐藏是使用最频繁的操作，在传统的 JavaScript中，一般通过改变元素显示的方式实现：  document.getElementById(“p1”).style.display=”block”;  隐藏：  document.getElementById(“p1”).style.display=”none”;  在jQuery中实现显示与隐藏的方式更为简单：  show（）与hide（）  上面的代码就等同于：  $(“p1”).css(“display”,”block”);  $(“p1”).css(“display”,”none”);

显示与隐藏 showo与 hide o)方法,不仅可以实现“无动画”版的显示与隐藏, 还可以完成动画效果的显示与隐藏,语法格式如下 show( speed,[ callback]);//动画效果的显示功能 hide( speed,[ callback]);//动画效果的隐藏功能 其中 speed表示执行动画时的速度, callback表示动画完成时执行的 回调函数

显示与隐藏  show()与hide（）方法，不仅可以实现“无动画”版的显示与隐藏， 还可以完成动画效果的显示与隐藏，语法格式如下：  show(speed,[callback]);//动画效果的显示功能  hide(speed,[callback]);//动画效果的隐藏功能  其中speed表示执行动画时的速度，callback表示动画完成时执行的 回调函数

显示与隐藏 案例1 s(function( var slinks(. artIst a") var Shide=s(. artIst eq(2)"); slink, click(function( if($(this).htm10=”显示") $(this).html("隐藏") Shide showO $(this).html("显示"); Shide. hideo

显示与隐藏  案例1：   $(function(){  var $link=$(".artList a");  var $hide=$(".artList :eq(2)");  $link.click(function(){  if($(this).html()=="显示"){  $(this).html("隐藏");  $hide.show();  }  else{  $(this).html("显示");  $hide.hide();  }  })  }) 

显示与隐藏 案例1-1 s(function( S(a). click(function i $("a").html("隐藏"); s(img) show(3000, function[ s(this). css(border, solid 1px #ccc") s(img"). click(function[ s(this). hide (3000) $("a").htm1("显示");

显示与隐藏  案例1-1：   $(function(){  $("a").click(function(){  $("a").html("隐藏");  $("img").show(3000,function(){  $(this).css("border","solid 1px #ccc");   })  })  $("img").click(function(){  $(this).hide(3000);  $("a").html("显示");  })  }) 

显示与隐藏 切换元素的可见状态 使用 toggle()方法可以切换元素的可见状态,即如果元素是可见 的,切换为隐藏;如果元素是隐藏的,切换为可见。 toggle方 法的语法格式如下: toggle o 动画格式调用: Toggle(speed, [callback])

显示与隐藏  切换元素的可见状态  使用toggle（）方法可以切换元素的可见状态，即如果元素是可见 的，切换为隐藏；如果元素是隐藏的，切换为可见。toggle（）方 法的语法格式如下：  toggle（）  动画格式调用：  Toggle(speed,[callback])

显示与隐藏 案例2 Kp>This is a paragraph. Toggle /body>

显示与隐藏  案例2：   $(function(){  $("button").click(function(){  $("p").toggle();  });  });     This is a paragraph.  Toggle 

滑动 在 jQuery中,还有一种滑动的动画效果改变元素的高度,要实现元 素的滑动效果,需要调用 jQuery中的两个方法,一个是 slideDown O 另一个是 slideUp o,其语法结构如下所示: slideDown (speed, [callback]) 其功能是以动画的效果将元素的高度向下增大,使其呈现一种“滑 动”效果,而元素的其他属性并不发生变化;参数 speed为动画显示 的速度,可选项 callback为动画显示完成后,执行的回调函数。 slideUp(speed, [callback]) 其功能是以动画的效果将所选择元素的高度向上减小,其他与 slideDown(方法一样

滑动  在jQuery中，还有一种滑动的动画效果改变元素的高度，要实现元 素的滑动效果，需要调用jQuery中的两个方法，一个是slideDown()， 另一个是slideUp()，其语法结构如下所示：  slideDown(speed,[callback])  其功能是以动画的效果将元素的高度向下增大，使其呈现一种“滑 动”效果，而元素的其他属性并不发生变化；参数speed为动画显示 的速度，可选项callback为动画显示完成后，执行的回调函数。  slideUp(speed,[callback])  其功能是以动画的效果将所选择元素的高度向上减小，其他与 slideDown（）方法一样