1

我想要的是：

当页面加载时，元素应该是不可见的，无论视口有多大。一定时间后，我想让元素飞进来。

到目前为止我所拥有的： 这段代码（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 );​

问题：

实际上，这段代码存在不止一个问题。

  • 它不适用于小窗口尺寸（见小提琴），为什么？
  • 当元素飞入后调整窗口大小时，margin-left 当然不是新窗口大小的 10%。有解决办法吗？申请.css("margin-left","10%");似乎有点多余。也许有什么resize();？

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

​</p>

4

2 回答 2

2

为什么不绝对定位元素：

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

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

演示

于 2012-07-07T10:54:08.140 回答
1

对于这个小效果，您的方法似乎很复杂。您可能想使用 JQueryUI 幻灯片效果http://jsfiddle.net/nvEyc/

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

http://jsfiddle.net/uGXb3/

由于使用了 % 值，因此适用于窗口调整大小。

基本上它的：

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

和

#div1 {
    margin-left:-100%;
}​
于 2012-07-07T10:57:25.450 回答