jquery - Jquery - 使用 IE 进行 CSS 翻译

Question

我想使用 JQuery 将其父 div“register_tile”中名为“register_bottom_bar”的 div 向上翻译 174 像素。我让它在 Chrome 和 Firefox 中完美运行。

我怎样才能在 IE 中做同样的事情？我在 IE 8 上测试它。

“register_tile”是一个更大的 div 内的浮动 div，“register_bottom_bar”位于“register_tile”的底部，位置：相对。

$('.register_tile').click(function () {
    $(this).css('opacity', '1');
    $(this).css('background-image', 'none');
    $('.register_bottom_bar').css('-webkit-transform', 'translate(0,-174px)');
    $('.register_bottom_bar').css('-moz-transform', 'translate(0,-174px)');
});

Answer 1

旧版 IE 没有任何过渡效果。（IE8 不支持 CSS3 变换）

我所知道的接近它的唯一方法是使用 JQueryfadeIn()和fadeOut()方法

你需要-ms-transform用于ie9

css(' -ms-transform', 'translate(0,-174px)');

来自 MSDN

---

-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */

Answer 2

如果您需要支持旧版本的 IE（6、7、8），则需要使用属性 margin / position 来代替。

$('.register_tile').click(function () {
    $(this).css('opacity', '1');
    $(this).css('background-image', 'none');
    $('.register_bottom_bar').css('left', '-174px); // With absolute / relative positioning
    // OR
    $('.register_bottom_bar').css('margin-left', '-174px);
});