如何通过jquery将div翻译到特定位置答案

【问题标题】：how to translate a div to particular position via jquery如何通过jquery将div翻译到特定位置
【发布时间】：2013-09-16 15:01:37
【问题描述】：

我想通过 Jquery 翻译 div x 和 y 位置。它适用于所有浏览器如 IE 7、IE8、IE9 和 IE10 我尝试如下

<div id="s1" style="-ms-transform:translate(159,430)">
            hello
        </div>

但不再工作了。如何在 IE7 和 IE8 和 IE9 浏览器中将 div 转换为页面中特定的 x 和 y 位置。

该解决方案适用于从 IE7 到 IE10 的各种 IE 版本。

谢谢，

湿婆

【问题讨论】：

可能重复stackoverflow.com/questions/13833934/…
transform css 属性不适用于旧版本的 IE。您应该改用 margin 或 position css 属性。看看 T.J.下面是克劳德的解决方案。

标签： javascript jquery html css internet-explorer

【解决方案1】：

因为IE7和IE8不支持transform，所以可以改用这个：

$("#s1").css("位置", "相对").animate({ 左：159，最高：430 });

【讨论】：

【解决方案2】：

使用像素等单位。

<style> 
.tt {
    width: 234px;
    height: 123px;
    background-color: #ABCDEF;
    transform:translate(159px,430px);
    -ms-transform:translate(159px,430px); /* IE 9 */
    -webkit-transform:translate(159px,430px); /* Safari and Chrome */
}
</style>
<div id="s1" class="tt">
    hello - use units like px
</div>

【讨论】：

【解决方案3】：

您可以将div 设置为绝对定位，并将其动画到您想要的位置：

$("#s1").css("position", "absolute").animate({
    left: 159,
    top:  430
});

在第一个位（对css 的调用）中，您可能需要指定起始位置。

Live Example | Live Source

【讨论】：

【解决方案4】：

-ms-transform 特定于 IE 浏览器。您需要添加其他浏览器特定的属性。

style="-ms-transform:translate(159,430); transform:translate(159,430); -webkit-transform:translate(159,430);"

【讨论】：