课堂笔记
一,Jquery尺寸
css盒子模型:
width():设置或返回元素的宽度(不包括内边距,边框,外边距)
height():设置或返回元素的宽度(不包括内边距,边框,外边距)
二、用Jquery书写尺寸
①jQuery 提供多个处理尺寸的重要方法:width() ,height(),innerWidth(),innerHeight(),outerWidth(),outerHeight()
②动画效果类型方式:slideup() 、slidedown(),show() 、hide(),animate(),slideToggle() 、slidewidow()
三,淡入淡出效果
代码:
<style>
#slide,#panel,#button1,#button2 {
padding: 5px;
text-align: center;
background-color: peachpuff ;
border: 2px solid darkred ;
}
#panel{
display: none;
padding: 40px;
}
</style>
<script>
$(document).ready(function(){
$("#slide").click(function (){
$("#panel").slideDown(1000)
})
$("#button1").click(function (){
$("#panel").slideUp(1000)
})
$("#button2").click(function (){
$("#panel").slideToggle(1000)
})
})
</script>
效果:
show():出现,hide():隐藏,toggle():来回滑动,slideUp(),slideDown(),slideToggle()