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 );​

問題：

実際、このコードには複数の問題があります。

  • 小さいウィンドウサイズでは機能しません（フィドルを参照）、なぜですか？
  • 要素がフライインした後にウィンドウのサイズが変更された場合、左マージンはもちろん新しいウィンドウサイズの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

あなたのアプローチは、この小さな効果のために複雑になる方法のようです。JQueryUISlide-Effecthttp://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 に答える