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. mayberesize();
?
i appreciate form of help!
â
why not positioning element absolutely:
#div1 { left: -20%; position: absolute } settimeout(function() { $('#div1').animate({left : 0},1000 ); }, 1000 );
Comments
Post a Comment