topic description
use jquery"s animate, to stack two div on top of each other, click the button to run up, and you can see that their junction scrolls very inelegantly. The picture does not show that the code can be copied locally.
sources of topics and their own ideas
related codes
/ / Please paste the code text below (do not replace the code with pictures)
< html >
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<style type="text/css">
.father{
margin-top: 200px;
margin-bottom: 200px;
}
.son1{
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
.son2{
width: 100px;
height: 100px;
background-color: green;
position: relative;
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
</div>
<button></button>
</body>
<script type="text/javascript">
$("button").click(function(){
$(".son1").animate({top:-100},500);
$(".son2").animate({top:-100},500);
})
</script>< / html >
what result do you expect? What is the error message actually seen?
how to make the two div scroll up naturally to solve the problem at the junction