<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jquery效果</title>
</head>
<style>
.a{
background-color:red;
width:100px;
height:100px;
position:absolute;
top:100px;
}
.b{
background-color:blue;
width:100px;
height:100px;
position:absolute;
top:250px;
}
</style>
<body>
<div class="a"></div>
<br/>
<div class="b">size</div>
<button type="" class="1">隐藏</button>
<button type="" class="2">显示</button>
<button type="" class="3">显示/隐藏</button>
<button type="" class="4">动画</button>
<button type="" class="5">分步动画</button>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="js/jQuery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$(".1").click(function(){//click:点击触发事件
$(".a").hide(1000);//设置隐藏的速度
$(".b").hide(2000);//分别设置不同的速度
});
$(".2").click(function() {
$("div").show(1000);//显示
});
$(".3").click(function(){
$("div").toggle();//隐藏+显示
});
$(".4").click(function(){//动画
$(".a").animate({
left:'250px',//右移250px
height:'150px',//高变成150px
width:'150px'//宽变成150px
})
})
$(".5").click(function(){//分步动画
$(".b").animate({
left:'250px'
}),
$(".b").animate({
height:'150px'
}),
$(".b").animate({
width:'150px'
}),
$(".b").animate({
fontSize:'100px'
})
// var div = $(".b");//简写
// div.animate({left:'250px'});
// div.animate({height:'150px'});
// div.animate({width:'150px'});
// div.animate({fontSize:'100px'})
});
})
</script>
</body>
</html>