Question

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>

Answer 1

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