jquery从中心到最左或最右进行动画（基于文档宽度在屏幕外）

发布于 2024-12-01 14:30:38 字数 446 浏览 1 评论 0原文

我有一个固定宽度的元素，我想基本上从屏幕向左或向右发射，我希望它可以在视觉上看到，因此使用动画。然而，根据我目前的尝试，它并没有按计划进行。

它目前所做的似乎是跳到屏幕的另一侧，然后朝我想要的方向平移。然而，我想要它做的是从它所在的位置穿过屏幕

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

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

的布局示例：

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

原文

I have a fixed width element that I want to essentially shoot off the screen either to the left or to the right, I want it to be seen visually though hence the use of animate. However its not working out as planned with my current attempts.

What it currently seems to be doing is jumping to the opposite side of the screen then panning across in the direction I want. However what I want it to do is from where it sits go across the screen

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

that is what I am attempting to use to achieve my desired goal

a sample of the layout would be

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

分享到QQ

分享到微博

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

发布评论

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

骷髅 2024-12-08 14:30:38

首先将其设置为固定位置

：

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

set it a fixed position first

go:

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

回复收藏 0 原文

夜空下最亮的亮点 2024-12-08 14:30:38

您是否想实现这样的目标：

http://jsfiddle.net/t2FxV/

回复收藏 0 原文

趁微风不噪 2024-12-08 14:30:38

如果它在屏幕上跳跃，则可能与边距从 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/< /a>

您的脚本工作正常，正如 jdavies 指出的那样（帖子已删除？），您可能需要将仪表板WidgetContainer 更改为现有元素的选择器。你应该注意的一件事是，如果你不打算将元素重新插入到页面中，你应该用 .remove() 替换 .hide().html('') ，因为从 DOM 中完全删除元素会更干净而不是把它留在外面展示：无；并且没有内容。

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

If it is jumping across the screen it probably has to do with margin changing from auto to 0, like in this example: http://jsfiddle.net/Paulpro/t2FxV/1/.

Make sure you set the marginLeft to the current position before animating:

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

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

Your script works fine as jdavies pointed out (post deleted?), you might need to change the dashboardWidgetContainer to a selector for an element that exists. One thing you should note is that if you don't plan on reinserting the element into the page you should replace .hide().html('') with .remove() as it's much cleaner to remove the element from the DOM altogether than leave it sitting out there with display: none; and no contents.

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

回复收藏 0 原文

~没有更多了~