元素的尺寸m
var $div = $('div')
//内容尺寸
console.log($div.width(),$div.height())//100.150
//内部尺寸
console.log($div.innerWidth(),$div.innerHeight())//120 170
//外部尺寸
//height+padding +border
console.log($div.outerWidth(),$div.outerHeight())
console.log($div.outerWidth(true),$div.outerHeight(true))
//如果是true再加上margin
淡入淡出: 不断改变元素的透明度来实现的 opacity
1. fadeIn(): 带动画的显示
2. fadeOut(): 带动画隐藏
3. fadeToggle(): 带动画切换显示/隐藏
滑动动画 不断改变元素的高度实现
1. slideDown(): 带动画的展开 //变化当前元素的高度
2. slideUp(): 带动画的收缩
3. slideToggle(): 带动画的切换展开/收缩
jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的
1. animate(): 自定义动画效果的动画
2. stop(): 停止动画
var $div1 = $('.div1')
$('#btn1').click(function(){
// $div1.animate({
// width:'200px' ,//可以自己加单位
// height:200
// },1000)
$div1
.animate({
width:200
},1000)
.animate({
height:200
},2000)
})
$('#btn2').click(function(){
$div1.animate({//右下移动 左上移动把值改为比原来的值小的值
left:500,
top:100
},1000)
})
$('#btn3').click(function(){//指定移动的距离 += -=
$div1.animate({
left:'+=100',
top:'-=100'
})
})
$('#btn4').click(function(){
$div1.stop()
})