jq淡入淡出
2020-10-23 本文已影响0人
lucky_yao
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background: #006400;
}
</style>
</head>
<body>
<div></div>
<button type="button">淡入</button>
<button type="button">淡出</button>
<button type="button">淡入淡出</button>
<button type="button">透明度</button>
</body>
<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('button').eq(0).click(function(){
$('div').fadeIn(1000)
})
$('button').eq(1).click(function(){
$('div').fadeOut(1000)
})
$('button').eq(2).click(function(){
$('div').fadeToggle(1000)
})
$('button').eq(3).click(function(){
$('div').fadeTo(1000,.3)
})
</script>
</html>
