如何将 div 从左侧滑动到页面中间的绝对位置？答案

【问题标题】：How to slide div from left to it's absolute position in the middle of the page?如何将 div 从左侧滑动到页面中间的绝对位置？
【发布时间】：2012-11-15 15:44:52
【问题描述】：

我想使用 jQuery 或 Javascript 来获取我的徽标，当页面加载时，将其从页面左侧滑动并使其停止并停留在页面中途的静止位置。（标志 div id="mylogo"）

【问题讨论】：

What have you tried?
您需要有一个我们可以帮助您的现有尝试。从头开始做别人的工作很无聊。
使用 jquery Animate 函数并试一试。如果您遇到困难，请发布一个具体问题。

标签： javascript jquery html css

【解决方案1】：

$(document).ready( function () {
  $("#myLogo").animate("aCSSAttribute", "toThisValue");
});

还检查： http://api.jquery.com/animate/

如果你表现出你的努力，那么我可以更好地帮助你。

【讨论】：

【解决方案2】：

你可能想要这样的东西：http://jsfiddle.net/SATMY/1/

你的问题根本不清楚，所以很难说我的答案是否真的是一个正确的答案。

$("div#logo").animate({"marginLeft":"-50px"}, 800);

以及初始 CSS：

margin-left: -900px; /* Before slide-in */

【讨论】：

【解决方案3】：

您需要计算出它需要移动多远，下面的示例假设 x%，但您可以根据需要对像素执行此操作。

不要忘记定位您的徽标，并确保外部元素具有一些宽度/显示定义。

Fiddle

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        #main {width:100%;}
        #mylogo{border:1px solid red;width:200px;height:100px;display:block;position:relative}
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){
    $('#mylogo').animate({left:'+=25%'});
    });    
    </script>

    </head>
    <body>
    <div id="main">        
        <div id="mylogo"></div>
        </div>
    </body>
    </html>

【讨论】：