如何为这个 margin-top 值变化添加动画？

发布于 2024-12-05 08:46:00 字数 453 浏览 1 评论 0原文

我有一个基本的小 js/jquery 函数，但我似乎无法让动画工作来更改 Body 的“margin-top” - 我需要 3em 的当前值将动画降低到 0em。这是我的功能：

$(".notify-close").click(function () {
  $('#notify-container').css('display', 'none');
  $('body').css("margin-top", "0em");
});

我无法弄清楚的一个部分是如何删除像素（或在本例中为 EM） - 例如，这里有一个关于向当前页边距顶部添加 50 个像素的想法，其值为“+=50” ，但是在 EM 中与此等效的 REMOVAL 是什么？像“-3EM”？？？：

$("body").animate({
    margin-top: "+=50"
  }, 1500 );

原文

I've got a basic little js/jquery function, but I can't seem to get the animation work for a change to the Body's "margin-top" - I need the current value of 3em to animate down to 0em. Here's my function:

$(".notify-close").click(function () {
  $('#notify-container').css('display', 'none');
  $('body').css("margin-top", "0em");
});

One part I can't figure out is how to remove pixels (or EM in this case) - for example, here's an idea regarding adding 50 pixels to a current margin-top, with a "+=50" value, but what's the REMOVAL equivalent to this in EM? Like "-3EM" ????:

$("body").animate({
    margin-top: "+=50"
  }, 1500 );

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

东风软 2024-12-12 08:46:00

你尝试过这个吗？

$("body").animate({
    margin-top: "-=50em"
}, 1500 );

Did you try this?

$("body").animate({
    margin-top: "-=50em"
}, 1500 );

回复收藏 0 原文

淡淡绿茶香 2024-12-12 08:46:00

$("body").animate({
    margin-top: "50px"
  }, 1500 );

$("body").animate({
    margin-top: "50px"
  }, 1500 );

回复收藏 0 原文

沩ん囻菔务 2024-12-12 08:46:00

我刚刚使用了这个脚本 - 在更改主体的 margin-top 值的 EM 值方面，它并不是 100% 动画，但它目前是一个基本修复：

<script>
    $(".notify-close").click(function () {
        $('#notify-container').css('display', 'none');
        $('body').css("margin-top", "0");
    });         
</script>

I just used this script - it's not 100% animated in regards to changing the EM value for the body's margin-top value, but its a basic fix for now:

<script>
    $(".notify-close").click(function () {
        $('#notify-container').css('display', 'none');
        $('body').css("margin-top", "0");
    });         
</script>

回复收藏 0 原文

~没有更多了~