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()方法一样