这是简单的向上滑动动画。问题是当我更改 myDiv 类的“top”参数时，动画工作不正确，它不是向上滑动，而是从顶部向下滑动。只有当我第一次点击按钮时，它才会不正确地工作。当我将 myDiv 的 top 参数更改为更大的数字时，就没有问题了。你能帮我找出代码有什么问题吗？
<style>
.box {
position:relative;
width: 200px;
height: 500px;
}
.myDiv {
position: absolute;
width:100%;
overflow: hidden;
bottom:0px;
top:10px;
left:500;
}
</style>
<script>
var swt = 0;
$(document).ready(function () {
$(".b1").click(function () {
var div = $(".myDiv");
if (swt == 0) {
div.animate({
top: '300px',
opacity: '1'
}, "slow");
// div.animate({height:'300px', opacity:'1'},"slow");
swt++;
} else {
div.animate({
top: '500px',
opacity: '1'
}, "slow");
// div.animate({height:'0px', opacity:'1'},"slow");
swt--;
}
});
});
</script>
</head>
<body>
<button class="b1">Start Animation</button>
<p>posds</p>
<div class="box">
<div class="myDiv" style="background:#7549B1; width:200px;"></div>
</div>
</body>
</html>
最佳答案
我不太确定你想要什么效果，但也许它正在改变 bottom 值而不是 top:
if(swt==0){
div.animate({bottom:'500px', opacity:'1'}, "slow");
swt++;
} else {
div.animate({bottom:'300px', opacity:'1'}, "slow");
swt--;
}
关于javascript - JQuery 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14522337/