CODEWITHSUNDEEP
jqueryhtmlmenuloadhtml-lists
derekS
derekS

Reputation: 25

Animate a menu on page load

I am trying to have my ul menu fly in from the left side of the page when the document loads using jquery. How would I go about doing this? Thanks for the help.

Upvotes: 1

Views: 284

Answers (2)

th3byrdm4n
th3byrdm4n

Reputation: 184

Launching off of what Dipesh Parmar started, I've made another working demo with a few key differences:

  1. You want it to come from the right, and slide to the left, see var startPos = 0 - objWidth;
  2. You likely want it to STOP before going off of the page, see left: $(document).width() - objWidth - 15 to move it to the edge of the page, displaying the full object (plus a little padding)

Since the demo is a little bit overly complicated likely for what you want, here's what the code you're after boils down to

var plane = $("#plane");
plane.css('left', plane.width()*-1); // Initially position the object off the page
plane.animate({
    left: $(document).width() - $("#plane").width() - 15 // Go to the right edge, show the whole object, and some padding
}, 3000, 'linear') // Action takes 3000 milliseconds in a linear motion

Check out jQuery's animation documentation for more http://api.jquery.com/animate/

Upvotes: 0

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

You can use jQuery.animate to animate element.

Example

$(document).ready(function(){
   $('ul').animate({left:'20px'},800);
});

I have created other DEMO for you to see it.

Upvotes: 1

Related Questions