teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問jQuery iOS スクロールイベント中に.fadeIn()が発生しない

編集履歴

質問編集履歴

5

情報追記

2017/01/26 05:21

投稿

grapeee
grapeee

スコア8

test CHANGED
File without changes
test CHANGED
@@ -13,6 +13,8 @@
13
13
  ・.fadeIn()の代わりに、.css()などではスクロール中でも変化するので、イベント自体は発生しているようです。
14
14
 
15
15
  ・iOSの環境はバージョン9.3.5です。
16
+
17
+ ・iOS10のバージョンでも同様でした。
16
18
 
17
19
 
18
20
 

4

テキスト修正

2017/01/26 05:21

投稿

grapeee
grapeee

スコア8

test CHANGED
@@ -1 +1 @@
1
- 【Jquery】iOS スクロールイベント中に.fadeIn()が発生しない
1
+ jQuery iOS スクロールイベント中に.fadeIn()が発生しない
test CHANGED
@@ -10,9 +10,9 @@
10
10
 
11
11
  ・fadeOutの方はスクロール中であっても、消えてくれます。
12
12
 
13
- ・.fadeIn();の代わりに、.css()などではスクロール中でも変化するので、イベント自体は発生しているようです。
13
+ ・.fadeIn()の代わりに、.css()などではスクロール中でも変化するので、イベント自体は発生しているようです。
14
14
 
15
- ・iOSの環境は9.3.5です。
15
+ ・iOSの環境はバージョン9.3.5です。
16
16
 
17
17
 
18
18
 
@@ -90,12 +90,6 @@
90
90
 
91
91
  }
92
92
 
93
- body{
94
-
95
- text-align:center;
96
-
97
- }
98
-
99
93
  p{
100
94
 
101
95
  color:#fff;
@@ -117,18 +111,6 @@
117
111
  background:tomato;
118
112
 
119
113
  margin:0 auto;
120
-
121
- }
122
-
123
- .hero p{
124
-
125
- color:#fff;
126
-
127
- display:inline-block;
128
-
129
- vertical-align: midle;
130
-
131
- line-height:100%;
132
114
 
133
115
  }
134
116
 
@@ -160,13 +142,11 @@
160
142
 
161
143
  .contents{
162
144
 
163
- width:960px;
145
+ width:1000px;
164
146
 
165
147
  height:2000px;
166
148
 
167
149
  margin:40px auto;
168
-
169
- padding:20px;
170
150
 
171
151
  background: #ddd;
172
152
 

3

修正

2017/01/25 00:40

投稿

grapeee
grapeee

スコア8

test CHANGED
File without changes
test CHANGED
@@ -150,7 +150,7 @@
150
150
 
151
151
  height:80px;
152
152
 
153
- background: #f75586 url('/rent/image/top/bg_header_btm.png') repeat-x bottom;
153
+ background: #f75586;
154
154
 
155
155
  box-shadow: 0 3px 5px 0 rgba(0,0,0,.15);
156
156
 

2

コードを追記

2017/01/24 07:42

投稿

grapeee
grapeee

スコア8

test CHANGED
File without changes
test CHANGED
@@ -54,9 +54,85 @@
54
54
 
55
55
  ```
56
56
 
57
+ ```lang-HTML
58
+
59
+ <body>
60
+
61
+ <div class="hero">
62
+
63
+ <p>Hero Area</p>
64
+
65
+ </div>
66
+
67
+ <div id="js-fix_menu" class="fix_menu">
68
+
69
+ <p>Fix Menu</p>
70
+
71
+ </div>
72
+
73
+ <div class="contents">
74
+
75
+ <p>Page Contents</p>
76
+
77
+ </div>
78
+
79
+ </body>
80
+
81
+ ```
82
+
57
83
  ```lang-CSS
58
84
 
85
+ html{
86
+
87
+ width: 1024px;
88
+
89
+ margin:0 auto;
90
+
91
+ }
92
+
93
+ body{
94
+
95
+ text-align:center;
96
+
97
+ }
98
+
99
+ p{
100
+
101
+ color:#fff;
102
+
103
+ font-size:16px;
104
+
105
+ text-align: center;
106
+
107
+ margin:20px auto 0;
108
+
109
+ }
110
+
111
+ .hero{
112
+
113
+ width:1000px;
114
+
115
+ height:300px;
116
+
117
+ background:tomato;
118
+
119
+ margin:0 auto;
120
+
121
+ }
122
+
123
+ .hero p{
124
+
125
+ color:#fff;
126
+
127
+ display:inline-block;
128
+
129
+ vertical-align: midle;
130
+
131
+ line-height:100%;
132
+
133
+ }
134
+
59
- #js-fix_menu{
135
+ .fix_menu{
60
136
 
61
137
  display:none;
62
138
 
@@ -74,12 +150,26 @@
74
150
 
75
151
  height:80px;
76
152
 
77
- background: #f75586;
153
+ background: #f75586 url('/rent/image/top/bg_header_btm.png') repeat-x bottom;
78
154
 
79
- box-shadow: 0 3px 5px 0 rgba(0,0,0,.15);
155
+ box-shadow: 0 3px 5px 0 rgba(0,0,0,.15);
80
156
 
81
157
  z-index: 99;
82
158
 
83
159
  }
84
160
 
161
+ .contents{
162
+
163
+ width:960px;
164
+
165
+ height:2000px;
166
+
167
+ margin:40px auto;
168
+
169
+ padding:20px;
170
+
171
+ background: #ddd;
172
+
173
+ }
174
+
85
175
  ```

1

記述間違い修正

2017/01/24 07:40

投稿

grapeee
grapeee

スコア8

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  javascript中級者です。
2
2
 
3
- Jqueryで、iPpad環境で、スクロール中（タッチパッドから指を離さない）に、fadeInが発生しません。
3
+ Jqueryで、iPad環境で、スクロール中（タッチパッドから指を離さない）に、fadeInが発生しません。
4
4
 
5
5
  いろいろ調べてみましたが、touchmoveイベントを使っているのにfadeInの方だけダメで、
6
6