jquery - Positioning element outside viewport, then pushing it in -


what want:

when page loads, element should invisible, no matter how big size of viewport is. after amount of time, want element fly in.

what have far: code (http://jsfiddle.net/ldfzw/1/):

html

<div id="div1"> <p>lorem ipsum</p> </div>​ 

css

#div1 { margin-left: 10%; } 

jquery

var tenpercent = $( window ).width()*0.1; $('#div1').css('margin-left',-tenpercent); settimeout(function() { $ ('#div1').animate({marginleft : tenpercent},1000 ); }, 1000 );​ 

the problem:

actually, there more 1 problem code.

  • it's not working small window sizes (see fiddle), why?
  • when window resized after element flew in, margin-left of course not 10% of new window size. there solution it? applying .css("margin-left","10%"); seems bit redundant. maybe resize();?

i appreciate form of help!

​

why not positioning element absolutely:

#div1 { left: -20%; position: absolute } settimeout(function() { $('#div1').animate({left : 0},1000 ); }, 1000 ); 

demo


Comments

Popular posts from this blog

javascript - backbone.js Collection.add() doesn't `construct` (`initialize`) an object -

php - Get uncommon values from two or more arrays -

Adding duplicate array rows in Php -