使用 Css 或 Jquery 移动 Div

Question

我有一个 css div 我想移动。 Css 过渡和 Jquery 上下滑动扩展或减小元素大小。 Jquery 左右动画是我迄今为止发现的最好的。但是我也想上下移动。你能用 Jquery animate 做到这一点吗？如果有怎么办。如果没有，有没有办法使用 Javascript Jquery 或 Css

这是我的代码。

<!DOCTYPE html>
<html>
    <head>
        <style>
            .purplecircle {
                width: 50px;
                height: 50px;
                -webkit-border-radius: 50px;
                -moz-border-radius: 50px;
                border-radius: 50px;
                background:#C0F;
                position:absolute;
            }
        </style>
        <script src="jquery-1.11.3.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#purplecircle1").animate({left: '96%'});
            });
        </script>
    </head>
    <body>
        <center>
            <div class="purplecircle" id="purplecircle1"></div>
        </center>
    </body>
</html>

Answer 1

要移动元素 up/down，您可以使用 JQuery animate 函数的 top 或 bottom 属性。例如，要向下移动元素，您可以这样做：

$("#purplecircle1").animate({top: '-x%'});

同样向上移动元素：

$("#purplecircle1").animate({top: 'x%'});

其中 x 是您希望将值移动的整数值。您可以省略 % 单位以使用像素。

Answer 2

要上下移动，您可以使用 top 或 bottom 变量而不是 left 像：jQuery("#purplecircle1").animate({top: '50%'});

您可以根据需要更改值。

使用 Css 或 Jquery 移动 Div

Moving Divs using Css or Jquery

javascript

css

jquery

transitions