test

jQueryのanimateメソッドを利用して、要素を動かそうしております。やり方としては、指定した要素の位置をoffsetで取得し、スクロールしてその位置まで来たらモノが動き出すということをしております。試したところ、実際にその位置までスクロールしたときに要素は動くのですが、、希望としてはその位置を超えてないときはまた元の位置に戻しときたいです。つまりその位置にスクロールで到達するたびに、アニメーションが実装されるようにしたいのです ```ここに言語を入力 test ここから下に要素があります↓ 　　　　　

``` cssコード ```ここに言語を入力 #test1{ position: absolute; left: 0; right: 0; margin: auto; top:6.38vw; width:30.27vw; height:9.93vw; z-index:4; } #test2{ position: absolute; left: 0; right: 0; margin: auto; top:19.65vw; width:59.2vw; height:10.77vw; z-index:3; } #test3{ position: absolute; left: 0; right: 0; margin: auto; top:32.3vw; width:57.71vw; height:7.4vw; z-index:2; } #test4{ position: absolute; left: 0; right: 1vw; margin: auto; top:43.54vw; width:50.21vw; height:6.04vw; z-index:1; } ``` jsコード ```ここに言語を入力 $(function(){ function animation(){ $('#test4').each(function(){ //ターゲットの位置を取得 var target = $('#test4').offset().top; //スクロール量を取得 var scroll = $(window).scrollTop(); //ウィンドウの高さを取得 var windowHeight = $(window).height(); //ターゲットまでスクロールするとフェードインする if (scroll > target - windowHeight){ $('#test4').animate({'top':'32.3vw'},1000); $('#test2').animate({'top':'32.3vw'},1000); setTimeout(function(){ $('#test1').animate({'top':'32.3vw'},1000);},1000); } }); } animation(); $(window).scroll(function (){ animation(); }); }); ``` 試したこと 1.if文のあとにelse文を書いて、それぞれを、もとのtopの位置に戻すことをしたのですが、動いてくれません。エラー文は特に出ておりませんでした。 ```ここに言語を入力 else{ $('#test4').animate({'top':'43.54vw'},1000); $('#test2').animate({'top':'19.65vw'},1000); } ``` 2.elseにanimateではなくcssを使ったのですがこれもうまくいきませんでした ```ここに言語を入力 else{ $('#test4').css('top','43.54vw'); $('#test2').css('top','19.65vw'); } ``` if文の中は動作するのですが一回実装されるのみでそのあとはいくらスクロールしても移動後の位置に止まったままです. どなたかわかる方おりましたら、ご回答宜しくお願い致します。

	@@ -1 +1 @@
1	- jQuery~~のanimateメソッド~~を~~リセット~~したい
1	+ jQueryで移動させた要素をもとに戻したい

質問編集履歴