概述
这是简单的向上滑动动画.问题是当我更改myDiv类的“top”参数时,动画工作不正确,而不是向上滑动,而是从顶部向下滑动.仅当我第一次单击按钮时,它才能正常工作.当我将myDiv的top参数更改为更大的数字时,就没有更多问题了.您能帮我发现代码有什么问题吗?<style>.box{这是简单的向上滑动动画.问题是当我更改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>
解决方法:
我不确定您想要的效果如何,但也许它正在更改最低值而不是最高值:
if(swt==0){
div.animate({bottom:'500px', opacity:'1'}, "slow");
swt++;
} else {
div.animate({bottom:'300px', opacity:'1'}, "slow");
swt--;
}
总结
以上是编程之家为你收集整理的javascript-jQuery动画全部内容,希望文章能够帮你解决javascript-jQuery动画所遇到的程序开发问题。
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。