如何通過jquery將div轉換到特定位置

Question

我想通過 Jquery 翻譯 div x 和 y 位置。 它將在所有瀏覽器中工作，如 IE 7、IE8、IE9 和 IE10我試過如下

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

但不再工作了。 如何將 div 轉換為可在IE7、IE8 和 IE9 瀏覽器中使用的頁面中特定的 x 和 y 位置。

該解決方案適用於從 IE7 到 IE10 的各種 IE 版本。

謝謝，

濕婆

Answer 1

-ms-transform 特定於 IE 瀏覽器。 您需要添加其他瀏覽器特定的屬性。

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

Answer 2

您可以使div絕對定位，並將其動畫化到您想要的位置：

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

在第一位（對css的調用）中，您可能想要指定一個起始位置。

現場示例| 直播源

Answer 3

因為 IE7 和 IE8 不支持轉換，所以你可以用這個代替：

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

Answer 4

使用 px 等單位。

<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>