Question

我想要的是什么：

当页面加载时，无论视口的大小有多大，该元素都应该是不可见的。经过一段时间后，我希望元素能够进入。

到目前为止我有什么： 此代码（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 );

问题：

实际上，此代码存在多个问题。

它不适用于小窗口尺寸（见小提琴），为什么？
在元素飞入后调整窗口大小时，左边距当然不是新窗口大小的10％。有解决方案吗？应用.css("margin-left","10%");似乎有点多余。也许有resize();的东西？

我真的很感激任何形式的帮助！

Answer 1

为什么不绝对定位元素：

#div1 {
    left: -20%;
    position: absolute
}

setTimeout(function() {
    $('#div1').animate({left : 0},1000 );
}, 1000 );

DEMO

Answer 2

你的方法似乎很复杂，因为这个小小的影响。您可能想要使用JQueryUI Slide-Effect http://jsfiddle.net/nvEyc/

否则没有JQuery UI我会这样做：

http://jsfiddle.net/uGXb3/

使用窗口调整大小，因为使用了％值。

基本上是：

setTimeout(function() {
    $ ('#div1').animate({marginLeft : "10%"},1000 );
    }, 1000 );

和

#div1 {
    margin-left:-100%;
}

在视口外定位元素，然后将其推入

2 个答案: