使用 jQuery 对元素进行动画处理

Animating element with jQuery

本文关键字：动画 处理 元素 jQuery 使用      更新时间：2023-09-26

>我已经成功地在窗口加载时从下到上将div动画设置为休耕：

<script>
      $(function(){
          $('#wrapper').animate({'margin-top': '20px'}, 1000);
      });
</script>
#wrapper {
    float: none;
    margin: 600px auto;
    max-width: 850px;
    min-width: 200px;
    padding: 0 2%;
}

但是，我现在需要从右到左对div 进行动画处理。我尝试了最初的 css，如下所示：

margin-top: 20px;
margin-right: auto;
margin-left: 100%;

然后： 

<script>
      $(function(){
          $('#wrapper').animate({'margin-left': 'auto'}, 1000);
      });
</script>

auto似乎不是一个有效的值，但我需要在中心有div 停止，所以我尝试了获取浏览器窗口的宽度，然后将其除以 2 并减去大小的一半的包装器，但我无法获得包装器的宽度，因为我使用的是硬编码宽度的最大宽度。我需要保持网站的响应。

一旦div居

中，我如何完成从左到右的动画？

试试看

$("#wrapper").animate({"marginLeft":"50%"}, 1000);

$('#wrapper').animate({right: (parseInt($(this).css('right'))-200)+"px"}, 1000);
相关文章：