close
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
#content{
width: 100px;
height: 100px;
background-color: cadetblue;
transition: 0.5s;
margin-left: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="content"></div>
<button id="wider">變大</button>
<button id="goright">往右</button>
<script type="text/javascript">
$('#wider').click(function(){
$('#content').css({
'width':'200px',
'height':'200px'
});
});
$('#goright').click(function(){
$('#content').css('margin-left','+=50')
});
</script>
</body>
</html>
全站熱搜
留言列表