Tracking Forums, Newsgroups, Maling Lists
Home Scripts Tutorials Tracker Forums
  Advanced Search
  HOME    TRACKER    JavaScript


JQuery :: Animate A Div On- And Off-screen With A Margin?

I want a div slide up from below the bottom of the screen after the content has loaded, and then when a user clicks the menu button I want the div to slide up off-screen.


as it slides up, I want it to appear not from the very bottom of the screen, but from, say, 100px over the bottom of the screen – and when it slides up offscreen, I want it to begin disappearing about a 100px below the upper edge of the screen.

I'm using this code:

<script type="text/javascript">
$('#content').animate({top: "150px"}, 2000); <!-- to make the #content div slide


What can I add / change to achieve the effect I want?

View 3 Replies (Posted: May 5 at 16:47)

Sponsored Links:

Related Forum Messages For JavaScript category:
JQuery :: Animate Onto Screen Works, But Animate Off Screen Happens Instantaneously?
I have a div that has a negative top margin and a negative right margin. The right margin is because I want to have the div slide onto the page from the right. The top margin is because without it my page height is the height of the visible elements plus the height of the off-screen div.On a button click, I move the div down and then animate it onto the screen from the right. On button click again, I animate the div to the right, off the screen, and then move it up. I also toggle its width & padding so it will appear to grow/shrink as it moves on/off screen. At least that's what I am trying to do. The animation onto the screen looks good, but going off the screen, it appears to happen intantaneously, instead of animatedDoes anyone know how I can fix this?

$(".addPanels").live("click", function(){//now and in the future, show the add panels menu
var thisAddPanelsMenu = $(this).parent().prev(".addPanelsMenu");//get the addPanelsMenu
if(thisAddPanelsMenu.length) {//if the addPanelsMenu exists


Posted: 27-Dec-2011

View 2 Replies!   View Related
JQuery :: Getting The Margin-top Needed To Put Element On The Top Of The Screen?
I've got a problem in internet explorer 6 and FF with something I'm trying to implement in jQuery. Basically there is an object at the top of the page using floated content that seems to be interfering with the $(window).scrollTop() property. It was my understanding (and if I'm wrong, please help me by telling me the right way!) that $(window).scrollTop() would return the whitespace hidden by scrolling. I did some tests without the floated content and they seem to support this.

This is my code:

$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 180) { //is the window scrolled enough to hide the header?
var $myDiv = $("#scrollingDiv");


So instead of being against the top edge like I thought, it's halfway down the page in my tests.

Posted: Aug 5 10 at 18:39

View 1 Replies!   View Related
JQuery :: Animate Margin Top - Opacity Function
I have a script on jsfiddle: [URL]. Nothing happens on hover. On hover I want the green box to overlap the red box with a negative margin -50px. Nothing happens. The animation works, but not margin. Just to show that the animation itself is working i added a opacity function to the animation. Margin-top is set to 0px inline as far as I can see.

Posted: Oct 18 11 at 11:40

View 6 Replies!   View Related
Margin Won't Animate Back To 0
I'm animating a button's size while constraing its position. It animates to its small size perfectly.

But animating to its larger size doesn't work as the margin is immediately set to 0px and as a result not animated.

Here is the example [url]...

Click a tile and it shrinks in a constrained manner.

Click it again and it snaps to the top left because the margin has been set to 0 instead of animated to 0.

Posted: Nov 15 11 at 9:35

View 2 Replies!   View Related
JQuery :: Using Animate To Change DIV Height - Unwanted Margin
I have been trying to create a collapsible footer with JQuery. I've got all the animation function working together, however, the animate function that operates on the div (id=draw) creates something that behaves like a margin underneath it (but doesn't appear in any style attributes or computed attributes). It just pushes any object below it down by the same height as the animated css height value I use.

Code used:
$("#open").click(function () {
$("#close, .shadow").click(function () {

For a better idea of what I'm describing check out [URL] and click on the "open" in the footer. I actually want the main container div to move up like that (or at least to create the same effect), so that the page above disappears off the page in proportion to the newly created div height at the bottom.

Posted: Jun 5 11 at 23:54

View 1 Replies!   View Related
Best Way To Animate Margin-Top As Inverse To Height?
I'm currently working on a personal project here: [URL]. As you'll notice, the 'link' jumps around as the element above it is animated. This is because the jQuery animate method doesn't step through the height and margin-top properties at the same intervals. I'm still fairly fresh at Javascript and jQuery. I was wondering if anyone had a simple way to correct the problem or a snippet of code that works more efficiently? Any recommendations to optimize or improve the usability.

Posted: Sep 18 11 at 8:53

View 1 Replies!   View Related
JQuery :: Css - .animate Reveal Contact Form Hidden In Div With Negative Margin Above Header
I've got my contact form hidden with a negative margin-top, so that when the visitor clicks "Contact" it reveals the div.

<script type="text/javascript">$("#revealContact").click(function(){
marginTop: "+=620px"
}, 1000);

You can view it live here: [URL] click Contact link in top right My problem is that as soon as the form is submitted, it inherits the -620 margin and the success (or error) prompt is invisible. I'm running in to some other cross-compatibility issues as well with the margin spacing so I'm not even sure this is the best way to go about this. Obviously it'd be great if I could just begin with the div as display:hidden and then animate it to visible, but I haven't been able to do that.

Posted: Jan 5 11 at 16:49

View 3 Replies!   View Related
Jquery :: Calculating 'margin-left' Or 'left' Relative To $(window).scrollLeft() Is Really Jagged In Firefox Using .animate() Or .css()?
I have a horizontally scrolling website, and I have a block that I want to stay in frame at all times as the user scrolls right. It looks perfectly smooth in webkit browsers, but is crazy jagged in Firefox and I don't really care about IEs.

function fixMyId(){
$('#myId').css({'margin-left': 150 + $(window).scrollLeft()});
function fixMyIdAlt(){


Posted: Jan 10 11 at 18:57

View 1 Replies!   View Related
Jquery :: Animate A Div Throughout Screen?
How can i animate a div throughout screen with single click with jquery

Posted: Dec 23 09 at 14:10

View 2 Replies!   View Related
Jquery :: IE Bug - Trying To Get Width / Height Of Image And Give It Margin-top And Margin-left
I have this code at the bottom of my page to center some images proportionally on a page. It works fine in Firefox and Chrome, but it doesn't in IE. It does execute the fadeIn(2000); in IE but it won't move the images. Is this an IE bug?


Posted: Oct 28 11 at 17:41

View 2 Replies!   View Related
Animate A Something Across A Screen?
How would I animate a something across a screen?

Posted: 15 December 2010

View 2 Replies!   View Related
Jquery :: Margin Left / Right Auto And 900px Width Is Positioning With Extra Wide Margin On The IPad/ IPhone Only
The following profile maintains centering in the main browsers in OSX and WinXp. But is offset to the left in the iPad with the width shorten by the larger margin on the right.


I have an inline unordered list containing thumbs that w/o java enabled extends to the right beyond the wrapper. These images are contained within a div that is positive relative. Once JavaScript is enabled on the browsers, the page is centered.

Posted: Nov 18 10 at 4:15

View 1 Replies!   View Related
JQuery :: Web Development - Animate Causing Screen To Jump?
So I'm learning jQuery and I think there is something that I am missing. I am using the following code on a "div" tag:

$("#faq-group-notice").animate({ height:'hide', opacity:'hide' });

It appears to be a final jump when it is finishing the animation. how to get rid of that?

EDIT: css for the div tag

<div id="faq-group-notice" class="flash notice hidden"></div>
.hidden {
display: none;
.notice {padding:0.8em;margin-bottom:1em;border:2px solid #ddd;}

Posted: Dec 5 10 at 16:59

View 5 Replies!   View Related
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 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>

Posted: Aug 25 11 at 21:07

View 3 Replies!   View Related
JQuery :: Create Buttons That Slide Onto Screen And Then Animate Slightly When Mouse Over?
I've been trying to find a jQuery that will have buttons float from left to right onto a page, then grow a little / shrink back to normal size on mouseover.

I've found lots of things that are predominantly for drop down menus - that's not really it.

Using my (limited) javascript skills I've modified a script that moves buttons or divs onto a page but it looks very dull. Powerpoint-like even.

Here's a link: [URL]

All the buttons need to do is jump to another page - the background image does not need to change at all / slide out or anything like that.

So basically what I'm looking for is a pointer to a jQuery thingy [!] that will do the above while looking a lot snazzier

Posted: 21-Oct-2010

View 1 Replies!   View Related
JQuery :: Scrolltop - Animate Page Down 100px From Current Screen Position
I need to animate a scroll from the current screen position, down a set number of pixels.

scrollTop: $(window).position().top += 100


Posted: Feb 3 11 at 6:33

View 2 Replies!   View Related
Animate DIVs Moving From A Central Point To Off-screen?
Is it possible to have divs located around a central point and then on hover for them to whisk off screen and return when the mouse is gone?

This what the layout:


is looking like, the idea is for the green "leaves" to whisk off to show the branches and the menus. Would this be possible with JavaScript and PHP?

Posted: Jun 11 10 at 17:26

View 2 Replies!   View Related
Animate - Make The Image Of The Kangaroo Appears To Hop Up And Down Across The Screen
I would like to make the image of the kangaroo appears to hop up and down across the screen.


Posted: 11 March 2009

View 1 Replies!   View Related
Firefox / Safari / Ie Top Margin - Left Margin 0
if i use


tag like this, will this ensure element i put in my html will displayed the same across all browser? the reason i asking this is because, i was told Internet explorer renedering of the page is slightly different .In other words, if i put img tag in a page and render it on Internet exploerer and render on firefox, maybe the coordinate of the img will slightly different because of margin/page border

Posted: Aug 22 09 at 14:28

View 1 Replies!   View Related
Does Margin-left:2px; Render Faster Than Margin:0 0 0 2px;
Douglas Crockford describes the consequence of Javascript inquiring a node's style. How simply asking for the margin of a div causes the browser to 'reflow' the div in the browser's rendering engine four times. So that made me wonder, during the initial rendering of a page (or in Crockford's jargon a "web scroll") is it faster to write CSS that defines only the non-zero/non-default values? To provide an example:


Posted: Apr 19 10 at 20:25

View 2 Replies!   View Related
Jquery :: Load IFrame At Margin: -9999px; Move IFrame Margin To +20px After 5 Seconds?
As the title says, I want to load an iFrame out of the visible window, at margin:-9999px; and then move it into the visible window after a 5 second delay. This is because I am performing a function on the iFrame and don't want users to see it until that function is complete. The code I am running is this:

jQuery(window).load(function(){jQuery(".Remover").find("p, ul").remove()});

If I can tell the browser not to show the result until the above is complete that would also be acceptable.

Posted: Oct 3 11 at 16:22

View 1 Replies!   View Related
Css - JQuery :: Animate A Centered Div To Fill The Screen While Its Still Being Centered?
I'm trying to animate a div to fill the screen and then return to its original size again.However, when i make the div fill the screen it doesn't animate from the centre, it starts from the top right. Furthermore, when I minimize it, it doesn't return to the starting position but to the top left.I have the jsfiddle code here. I'm trying to get it to animate smoothly from its starting point at the centre, fill the screen and then backwards to its starting position like in the begining.

Posted: Aug 23 11 at 10:02

View 3 Replies!   View Related
Jquery :: 'chained' Animation That Moves A Div Element On The Screen To Two Different Points On The Screen - In Two Consecutive Steps Webkit
I would like to create a 'chained' animation that moves a div element on the screen to two different points on the screen, in two consecutive steps. So if my div starts at (0,0), I would like this div to animate and move towards (100,100) in 2 seconds. After it reaches the latter destination, it then animates again and moves to point (200, 200) in 3 seconds. Using -webkit-animation I am able to make one translation or animation, but I cannot chain the second animation to start after the first has finished - because I do not have a handle provided to be (an event, or a css class) that can give me such information. I am happy to use a bit of javascript magic as part of the solution. Here is some code to visualise what I am trying to do:


Edit: I am after a solution that uses -webkit-animation because it is currently the best way to display smooth native-like animation in osx

Posted: Jun 8 11 at 12:14

View 4 Replies!   View Related
Jquery :: Get Screen Shot / Screen Capture From Web User On MVC Website?
I've seen a few different apps that allow users to take screen shots on their PC and then the utility will automatically upload the image to the web server. I'd like to incorporate this type of functionality into a new MVC site. I could certainly just allow the user to upload their own image, but it'd be cleaner if they could click Capture Screen Shot and the image would be uploaded automatically. My team is using ASP.NET MVC2 with a SQL back end database. We are certainly willing to look into 3rd party components (activeX based, etc.) that will allow us to achieve this.

Posted: Apr 2 10 at 17:57

View 2 Replies!   View Related
Copyright 2005-08, All rights reserved