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（）方法一样