javascript-jQuery动画

概述

这是简单的向上滑动动画.问题是当我更改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--;
}

http://jsbin.com/ixigaf/1/edit

总结

以上是编程之家为你收集整理的javascript-jQuery动画全部内容，希望文章能够帮你解决javascript-jQuery动画所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

欢迎加入编程之家官方交流群！与上千程序员伙伴一起交流学习～

javascript-jQuery动画

概述

总结

jQuery文章