威海 网站开发,做家具的网站有哪些,网站建设api,拓者设计吧室内设计官网案例一、显隐效果show() show(duration,[callback])show([duration],[easing],[callback])
参数说明#xff1a;duration#xff1a;为一个字符串或者数字#xff0c;决定动画将运行多久callback#xff1a;表示在动画完成时执行的函数。easing#xff1a;为一个字符串#x…一、显隐效果show() show(duration,[callback])show([duration],[easing],[callback])
参数说明duration为一个字符串或者数字决定动画将运行多久callback表示在动画完成时执行的函数。easing为一个字符串用来表示哪个缓冲区来过渡。(没用过....)案例
htmlheadtitleJQuery/titlestyle#p1{background:url(imgliu/photo6.png);background-position: center;background-size: cover;background-repeat: no-repeat;width: 50px;height: 50px;}/stylescript typetext/javascript srcjs/jquery-3.2.1.min.js/script/headbodyscript$(function(){var t1;$(input).click(function(){t;if(t%20){$(div).show(500);}else{$(div).hide(500);}})});/scriptinput typebutton valuehide Element div idp1/div/body
/html
htmlheadtitleJQuery/titlestylediv{background:url(imgliu/photo6.png);background-position: center;background-size: cover;background-repeat: no-repeat;width: 50px;height: 50px;float: left;margin-left: 30px;}/stylescript typetext/javascript srcjs/jquery-3.2.1.min.js/script/headbodyscript$(function(){for(var i0;i5;i){$(div).appendTo(document.body);}$(div).click(function(){$(this).hide(500,function(){$(this).remove();});});});/scriptdiv/div/body
/html二、显隐切换toggle([duration],[callback])toggle([duration],[easing],[callback])toggle(showOrHide)
参数说明showOrHide:是一个布尔值表示是否显示或隐藏的元素。
htmlheadtitleJQuery/titlestylediv{background:url(imgliu/photo6.png);background-position: center;background-size: cover;background-repeat: no-repeat;width: 50px;height: 50px;margin-left: 30px;}/stylescript typetext/javascript srcjs/jquery-3.2.1.min.js/script/headbodyscript$(function(){$(button).click(function(){$(div).toggle(slow);})})/scriptbutton显示和隐藏/buttondiv/div/body
/html
三、滑动效果
滑动方法slideDown() //向下滑动作用于隐藏的元素slideUp()//向上滑动作用于显示的元素实例
htmlheadtitle/titlescript typetext/javascript srcjs/jquery-3.2.1.min.js/script/headbodyscript$(function(){$(button).click(function(){$(this).parent().slideUp(slow,function(){$(#msg).text($(button,this).text()已经实现。);});});});/scriptstyle typetext/cssdiv{margin: 2px;}/styledivbutton隐藏文本框1/buttoninput typetext value文本框1 //divdivbutton隐藏文本框2/buttoninput typetext value文本框2 //divdivbutton隐藏文本框3/buttoninput typetext value文本框3/divdiv idmsg/div/body
/html
四、滑动切换slideToggle([duration],[callback])slideToggle([durantion],[easing],[callback])
