Fatal编程技术网

Javascript JQuery动画

javascript jquery animation

Javascript JQuery动画,javascript,jquery,animation,Javascript,Jquery,Animation,这是简单的向上滑动动画。问题是，当我更改myDiv类的“top”参数时，动画工作不正确，它不是向上滑动，而是从顶部向下滑动。只有当我第一次单击按钮时，它才会不正确地工作。当我将myDiv的top参数更改为更大的数字时，就没有问题了。你能帮我找出代码有什么问题吗 <style> .box { position:relative; width: 200px; height: 500px; } .myDiv {

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


.盒子{
位置：相对位置；
宽度：200px；
高度：500px；
}
myDiv先生{
位置：绝对位置；
宽度：100%；
溢出：隐藏；
底部：0px；
顶部：10px；
左：500；
}
var-swt=0；
$（文档）.ready（函数（）{
$（“.b1”）。单击（函数（）{
var div=$（“.myDiv”）；
如果（swt==0）{
动画师({
顶部：“300px”，
不透明度：“1”
}“慢”）；
//动画（{高度：'300px'，不透明度：'1'}，“慢”）；
swt++；
}否则{
动画师({
顶部：“500px”，
不透明度：“1”
}“慢”）；
//动画（{高度：'0px'，不透明度：'1'}，“慢”）；
swt--；
}
});
});
启动动画
posds
我不确定您想要什么效果，但可能是更改了
底部的值，而不是
顶部的值：


if(swt==0){
    div.animate({bottom:'500px', opacity:'1'}, "slow");
    swt++;  
} else {
    div.animate({bottom:'300px', opacity:'1'}, "slow");
    swt--;
}



不要在同一个元素上使用
底部
和
顶部
，否则会产生冲突。使用负值定义高度和动画顶部：





这是我所理解的错误，但如果您将css top从10px更改为100px（与js中的top相同），一切都应该正常


.myDiv {
        position: absolute;
        width:100px;
        height: 100px;
        overflow: hidden;
        top:100px;
        left:100px;
        background: red;
}

$(".b1").click(function () {

            var div = $(".myDiv");
            if (swt == 0) {
                div.animate({
                    top: '100px',
                    opacity: '1'
                }, "slow");
                //  div.animate({height:'300px', opacity:'1'},"slow");
                swt++;
            } else {
                div.animate({
                    top: '200px',
                    opacity: '1'
                }, "slow");
                //  div.animate({height:'0px', opacity:'1'},"slow");
                swt--;
            }
        });



你的css有一些输入错误。为什么要同时输入.myDiv的顶部和底部位置，以及lyeft是否没有px？如果myDiv中没有顶部位置，效果相同，首先它从顶部向下移动（仅第一次）。然后它正常工作。因为你的初始顶部位置（css中）与js中的不同。我希望我的div从某个位置向上滑动。我检查过你的样品，它的工作原理是一样的，只是它会滑下来。如果您将myDiv的顶部位置更改为500px，它将按照我需要的方式工作，除非您第一次单击按钮，否则它不会做任何事情。我会继续努力，看看上面Marcin Bobowsky的评论。如果我理解正确，问题出在您最初的div css上，而不是js上。看，我是个白痴，不是向上滑动，而是向下滑动。不管怎样，我会根据你的回答和Marcin的评论来修复它。谢谢。谢谢，伙计，我就这么做。：）现在开始工作了。我现在需要睡觉了，谢谢你的帮助。我明天修。我真是个笨蛋。

.myDiv {
        position: absolute;
        width:100px;
        height: 100px;
        overflow: hidden;
        top:100px;
        left:100px;
        background: red;
}

$(".b1").click(function () {

            var div = $(".myDiv");
            if (swt == 0) {
                div.animate({
                    top: '100px',
                    opacity: '1'
                }, "slow");
                //  div.animate({height:'300px', opacity:'1'},"slow");
                swt++;
            } else {
                div.animate({
                    top: '200px',
                    opacity: '1'
                }, "slow");
                //  div.animate({height:'0px', opacity:'1'},"slow");
                swt--;
            }
        });