絶えず変化する要素の位置を取得します。

StackOverflow https://stackoverflow.com/questions/968678

質問

私はいくつかの雲が移動された背景のようなものを作るしようとしていたが、私は雲が動いてしまった後、私は、ブラウザの最大幅に達したときにそれらを停止して返すように、またはそれらが消えるようすべきいずれかのことがわかりました。私は自分の位置を取得しようとしていたが、私は動的にすべてのポジションを得るために管理することはできません。今（簡略化のために）私はテストするために1つのクラウドを使用していると私は、次の操作を行います。

$(function(){

    var p = $('.clouds').position();
    var w = $("#sky").width();
    while(p < w);
        $('.clouds',this).stop().animate({left:"+=50000px"},{queue:false, duration:90000});

});

の事は...それはそれを取得最初のものとスティックと私はwhileループ内でそれを移動しようとしていますが、それはうまくいきませんでした、その位置が動的に更新されません、ですので、私はちょっとで立ち往生しています瞬間は...誰もが、私はこれを達成する方法のアイデアを持って？雲の画像が最初に上部に設定されている：0左：0

役に立ちましたか？

解決

私は、このコードは、これをu.Tryするのに便利になると思う！

$('.clouds').animate({ top:0},{queue:false, duration:90000});
setInterval(function(){
if($(".clouds").position().top==0) alert("Rain");
},5000)

5秒ごとのためにそれがゼロであれば、それは警告を与えるであろう、「クラウド」クラスの位置をチェックします！

Uはコードの下に使用することができ、複数のクラウドのための

 setInterval(function(){
if($(".clouds").position().top==0){
    $(".clouds").each(function(){
        if($(this).position().top==0) $(this).remove();
    });
}
},1000)

他のヒント

は、あなたが使用しているものの直接のコピーを掲載しましたコードですか？もしそうなら、それがセミコロンで短く切っていますから、その後、アニメーション化する呼び出しはwhileループには含まれていません。中括弧を使用してみてください。それははるかに簡単に維持すると見てみます。 ：）

while(p < w) {
     $('.clouds',this).stop().animate({left:"+=50000px"},{queue:false, duration:90000});
}
<時間>

また、私はループが今までに完了することはないと思います。それは決して終わることのないですので、これらの変数の値は、いずれも反復中に変化しています。それが機能するためには、あなたはすべての繰り返しで、ループ内で「P」変数に（更新）を変更する必要があります。

<時間>

編集：実際に、のelem.position() のためのループも開始しない、ことをスクラッチはオブジェクトではなく、数（のNaNの）を返します。それはあなたが必要となります動作させるための elem.position().left の。

なぜループする背景画像を使用してのbackground-position CSSのプロパティを変更しませんか？

編集：これを自動的に行うためのプラグインjqueryのがあるかどうかはわからないが、それはのsetIntervalや弾性率を持つ昔ながらのjavascriptのに十分簡単なはずです。

例えば、あなたの背景画像は、400個のピクセルの幅であります CSSは次のようになります：

body { 
    background: transparent url(yourbackground.png) repeat-x scroll 0 0;
}

とJavaScriptは以下のようになります：

var BGPosition = 0;
var resetSize=400;
function scrollBodyBG() {
    BGPosition = ++BGPosition % resetSize;
    $('body').css("background-position", (-1 * BGPosition) + "px 0px");
}

var si = setInterval(scrollBodyBG,100)

編集：（jqueryのせず）を試験し、作業

として 
var BGPosition = 0;
var resetSize=400;
function scrollBodyBG() {
    BGPosition = ++BGPosition % resetSize;
    document.body.style.backgroundPosition = (-1 * BGPosition) + "px 0px";
}

document.addEventListener("DOMContentLoaded",function() { setInterval(scrollBodyBG,100);},false);

、明らかにこれはIEのイベントリスナーをサポートするために変更する必要があります。

いかがます：

 while($('.clouds').position().left < $("#sky").width())
 {
       // do stuff
 }

確実にこれを行うための唯一の方法は、変異イベント（例のため。）DOMAttrModifiedとIEの独自の「onpropertychange」を使用して、DOM要素のプロパティの変更を聞くことです。

誰かがここに記事があります、jQueryのにこれを移植します。

http://www.west-wind.com/Weblog/posts /453942.aspxする

のはmoveCloudを言わせて、関数内でそれをすべて入れて（）

そして、アニメイト位置のコールバックを使用し、その関数を呼び出します。 関数の先頭で雲の位置を確認します：

それはのmaxWidthに達するまで、右へ0動きは、

は、-if

がのmaxWidthは-ifが0に達するまで、左に移動

アニメーションが完了すると、

は、コールバックが再び画面の反対側に雲を移動する機能を実行し、呼び出します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top