CODEWITHSUNDEEP
jquerycss
RGS
RGS

Reputation: 4253

Slide div 100% right to left? CSS-JQUERY

I need to slide a div menu 100% width when page loads. but it is not working:

css

#menu{
 position: fixed;
 z-index: 101;
 top:0;
 color:#fff;
 font-weight:bold;
 font-size: 10px;
 height:50px;
 width:100%;
 min-width:50px;
 background:red;
}

JQUERY

$(document).ready(function(){
  $("#menu").animate({ left: '0'}, 'fast');
});

what I want is this div, when page loads, starts appear on the right corner till left and stay on the top with 100% width after that. http://jsfiddle.net/12tx42q4/

thank you

Upvotes: 0

Views: 2422

Answers (3)

Anas Omar
Anas Omar

Reputation: 504

you just have to set left:100%

http://jsfiddle.net/12tx42q4/5/

Upvotes: 1

Derek Story
Derek Story

Reputation: 9593

You need to give it a starting point like left: 100%: JS Fiddle

left: 0 is the default starting point, so without changing that, its not going to appear to animate.

Upvotes: 1

DieVeenman
DieVeenman

Reputation: 457

You are basically saying: When the body is loaded slide to left with a distance of 0 pixels.

Try setting the amount of pixels it must travel

Left: 'Insert pixels here'

Like this:

  $(document).ready(function(){
          $("#menu").animate({ left: '100'}, 'slow');
  });

Upvotes: 0

Related Questions