Question

我有一个固定的宽度元素，我想要从左侧或右侧拍摄屏幕，我希望它在视觉上可见，因此使用动画。然而，我目前的尝试并没有按计划进行。

目前似乎正在做的是跳到屏幕的另一侧，然后向我想要的方向平移。但是，我想要它做的是从它坐在屏幕上的位置

$('.element').animate({'marginLeft':($(document).width())+'px'},1000, function(){$('#dashboardWidgetContainer').hide().html('')});

这就是我试图用来实现我期望的目标

布局的样本将是

<div id="container">
     <div class="element"></div>
</div>

Answer 1

首先将其设置为固定位置

转到：

$el = $('.element');
$el.css({
  position: 'fixed',
  top: $el.offset().top,
  left: $el.offset().left
}).animate({left:'100%'}, 1000);

Answer 2

你是否想要实现这样的目标：

http://jsfiddle.net/t2FxV/

Answer 3

如果它跳过屏幕，则可能与从auto更改为0的边距有关，如下例所示：http://jsfiddle.net/Paulpro/t2FxV/1/。

确保在设置动画之前将marginLeft设置为当前位置：

$('#element').css('marginLeft', $('#element').position().left).animate({'marginLeft':($(document).width())+'px'},1000, function(){$('#container').hide().html('')});

http://jsfiddle.net/Paulpro/pakCP/

您的脚本正常工作，因为jdavies指出（发布后删除？），您可能需要将dashboardWidgetContainer更改为存在元素的选择器。您应该注意的一件事是，如果您不打算将元素重新插入页面，则应该使用.remove（）替换.hide（）。html（''），因为从DOM中删除元素要简单得多而不是让它坐在那里与display：none;没有内容。

$('#element').css('marginLeft', $('#element').position().left).animate({'marginLeft':($(document).width())+'px'},1000, function(){$('#container').remove()});

jquery从中心到最左边或最右边的动画（基于doc宽度的屏幕外）

3 个答案: