teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

追記の修正

2019/03/11 04:07

投稿

Anon_
Anon_

スコア334

title CHANGED
File without changes
body CHANGED
@@ -40,8 +40,8 @@
40
40
 
41
41
 
42
42
  編集
43
- 下記のように書き直しましたが、アニメションが200msごとなく一気に実行されようになりました。
43
+ 下記の期待す動作となりました。
44
- 何がおかしいでしょうか。
44
+
45
45
  ``````ここに言語を入力
46
46
 
47
47
  $(".home .s3 .box").css("position","absolute");
@@ -59,7 +59,7 @@
59
59
 
60
60
  if (scroll > imgPos - windowHeight + windowHeight / 3){
61
61
  // ここに処理を書く
62
- deferredArr.push( $(this).delay(200).css("visibility","visible").animate({opacity: 1}, 1000));
62
+ deferredArr.push( $(this).delay(200*i).css("visibility","visible").animate({opacity: 1}, 1000));
63
63
  }
64
64
  });
65
65
 

1

修正

2019/03/11 04:07

投稿

Anon_
Anon_

スコア334

title CHANGED
File without changes
body CHANGED
@@ -36,4 +36,37 @@
36
36
  });
37
37
  </script>
38
38
 
39
+ ```
40
+
41
+
42
+ 編集
43
+ 下記のように書き直しましたが、アニメーションが200msごとでなく一気に実行されるようになりました。
44
+ 何がおかしいでしょうか。
45
+ ``````ここに言語を入力
46
+
47
+ $(".home .s3 .box").css("position","absolute");
48
+ $(window).on("load scroll resize", function(){
49
+ promiseIncrement();
50
+ });
51
+
52
+
53
+ function promiseIncrement() {
54
+ var deferredArr = [];
55
+ $(".as").each(function(i){
56
+ var imgPos = $(this).offset().top;
57
+ var scroll = $(window).scrollTop();
58
+ var windowHeight = $(window).height();
59
+
60
+ if (scroll > imgPos - windowHeight + windowHeight / 3){
61
+ // ここに処理を書く
62
+ deferredArr.push( $(this).delay(200).css("visibility","visible").animate({opacity: 1}, 1000));
63
+ }
64
+ });
65
+
66
+ if( deferredArr.length > 0 ){
67
+ $.when.apply( $,deferredArr ).done(function(){
68
+ console.log('OK');
69
+ });
70
+ }
71
+ }
39
72
  ```