jquery animate from center to far left or far right (off screen based on doc width)

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开发者_JAVA百科 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>

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);

Are you trying to achieve something like this:

http://jsfiddle.net/t2FxV/

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()});