質問編集履歴

3

単独で動くように修正

2017/05/19 04:39

投稿

fnwakc
fnwakc

スコア15

test CHANGED
File without changes
test CHANGED
@@ -20,124 +20,462 @@
20
20
 
21
21
  ```
22
22
 
23
+ <html lang="ja"><head>
24
+
25
+ <meta charset="UTF-8">
26
+
27
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
28
+
29
+ <title>テスト</title>
30
+
31
+ <meta http-equiv="content-script-type" content="text/javascript">
32
+
33
+
34
+
35
+ <script src="http://code.jquery.com/jquery-2.1.1.js"></script>
36
+
37
+ <link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css" type="text/css" media="all">
38
+
39
+ <script src="http://cosablog.minibird.jp/wow/js/wow.js"></script>
40
+
41
+
42
+
43
+ <script>
44
+
45
+ $(function() {});
46
+
47
+
48
+
49
+ /* setSpNav
50
+
51
+ ============================================================================================================ */
52
+
53
+ function setSpNav() {
54
+
55
+ var b = $('#header nav p a'),
56
+
57
+ w = $('#header'),
58
+
59
+ e = $('#header nav li'),
60
+
61
+ c = 'open',
62
+
63
+ cs = 'showed';
64
+
65
+
66
+
67
+ b.on('click', function() {
68
+
69
+ w.addClass(cs).toggleClass(c);
70
+
71
+ return false;
72
+
73
+ })
74
+
75
+ var end_events = ['webkitTransitionEnd','oTransitionEnd','otransitionend','transitionend'],
76
+
77
+ end_event = end_events.join(' ');
78
+
79
+
80
+
81
+ e.on(end_event, function() {
82
+
83
+ if(!w.hasClass(c)) w.removeClass(cs);
84
+
85
+ });
86
+
87
+
88
+
89
+ $('a', e).on('click', function() {
90
+
91
+ if(w.hasClass(c)) w.removeClass(c);
92
+
93
+ });
94
+
95
+ }
96
+
97
+
98
+
99
+ jQuery.extend( jQuery.easing,{
100
+
101
+ easeInOutCubic: function (x, t, b, c, d) {
102
+
103
+ if ((t/=d/2) < 1) return c/2*t*t*t + b;
104
+
105
+ return c/2*((t-=2)*t*t + 2) + b;
106
+
107
+ },
108
+
109
+
110
+
111
+
112
+
113
+ });
114
+
115
+
116
+
117
+ </script>
118
+
119
+
120
+
121
+
122
+
123
+
124
+
125
+ <script>
126
+
127
+ $(function() {
128
+
129
+ setContentChange();
130
+
131
+ });
132
+
133
+
134
+
23
135
  function setContentChange() {
24
136
 
25
- var slide = function(ele, nav, n) {
137
+ var slide = function(ele, nav, n) {
26
-
138
+
27
- ele.stop().animate({left: -n*970}, 600, 'easeInOutCubic');
139
+ ele.stop().animate({left: -n*970}, 600, 'easeInOutCubic');
28
-
140
+
29
- var cn = nav.eq(n);
141
+ var cn = nav.eq(n);
30
-
142
+
31
- nav.not(cn).removeClass('current');
143
+ nav.not(cn).removeClass('current');
32
-
144
+
33
- cn.addClass('current');
145
+ cn.addClass('current');
34
146
 
35
147
  }
36
148
 
37
149
 
38
150
 
39
- $('#container > section').each(function(i) {
40
-
41
- var sc = $('.s_contents' ,this);
42
-
43
-
44
-
45
- if(sc.length > 0) {
46
-
47
- var nav = $('> header li a', this);
48
-
49
- nav.each(function(i) {
50
-
51
- $(this).on('click', function() {
52
-
53
- slide(sc, nav, i)
54
-
55
- return false;
56
-
57
- })
58
-
59
- })
60
-
61
- }
62
-
63
- })
64
-
65
- }
151
+ $('#container > section').each(function(i) {
152
+
153
+ var sc = $('.s_contents' ,this);
154
+
155
+
156
+
157
+ if(sc.length > 0) {
158
+
159
+ var nav = $('> header li a', this);
160
+
161
+ nav.each(function(i) {
162
+
163
+ $(this).on('click', function() {
164
+
165
+ slide(sc, nav, i)
166
+
167
+ return false;
168
+
169
+ })
170
+
171
+ })
172
+
173
+ }
174
+
175
+ })
176
+
177
+ }
178
+
179
+ </script>
180
+
181
+ <style>
182
+
183
+ ol, ul {
184
+
185
+ list-style: none;
186
+
187
+ }
188
+
189
+ .w {
190
+
191
+ width: 960px;
192
+
193
+ margin: 0 auto;
194
+
195
+ padding: 0 10px;
196
+
197
+ }
198
+
199
+ #container > section > header {
200
+
201
+ background-color: #fff;
202
+
203
+ }
204
+
205
+ #container > section > header .w {
206
+
207
+ position: relative;
208
+
209
+ height: 180px;
210
+
211
+ }
212
+
213
+ #container > section > header h2 {
214
+
215
+ position: absolute;
216
+
217
+ right: 10px;
218
+
219
+ top: 0;
220
+
221
+ padding-top: 95px;
222
+
223
+ text-align: right;
224
+
225
+ font-size: 16px;
226
+
227
+ font-size: 1.6rem;
228
+
229
+ }
230
+
231
+ #container > section > header ul {
232
+
233
+ position: absolute;
234
+
235
+ left: 10px;
236
+
237
+ bottom: 0;
238
+
239
+ }
240
+
241
+ #container > section > header ul li {
242
+
243
+ float: left;
244
+
245
+ margin-right: 5px;
246
+
247
+ }
248
+
249
+ #container > section > header ul li a {
250
+
251
+ display: table-cell;
252
+
253
+ width: 180px;
254
+
255
+ height: 60px;
256
+
257
+ padding-left: 0.2em;
258
+
259
+ background-color: #b9b9b9;
260
+
261
+ text-align: center;
262
+
263
+ vertical-align: middle;
264
+
265
+ color: #fff;
266
+
267
+ letter-spacing: 0.2em;
268
+
269
+ -webkit-box-sizing: border-box;
270
+
271
+ -moz-box-sizing: border-box;
272
+
273
+ box-sizing: border-box;
274
+
275
+ -webkit-transition: background 0.2s;
276
+
277
+ -o-transition: background 0.2s;
278
+
279
+ transition: background 0.2s;
280
+
281
+ }
282
+
283
+ #container > section > header ul li a:hover,
284
+
285
+ #container > section > header ul li a.current {
286
+
287
+ background-color: #282828;
288
+
289
+ text-decoration: none;
290
+
291
+ }
292
+
293
+ #container > section > header ul li a.current {
294
+
295
+ cursor: default;
296
+
297
+ }
298
+
299
+
300
+
301
+
302
+
303
+ /* コンテナ
304
+
305
+ ============================================================================================================ */
306
+
307
+ #container {
308
+
309
+ position: relative;
310
+
311
+ font-size: 12px;
312
+
313
+ font-size: 1.2rem;
314
+
315
+ line-height: 1.9;
316
+
317
+ z-index: 10;
318
+
319
+ }
320
+
321
+ #container > section {
322
+
323
+ overflow: hidden;
324
+
325
+ position: relative;
326
+
327
+ margin-bottom: 300px;
328
+
329
+ z-index: 10;
330
+
331
+ background:#CCC;
332
+
333
+ }
334
+
335
+
336
+
337
+ /* s_contents
338
+
339
+ ============================================================================================================ */
340
+
341
+ .s_contents {
342
+
343
+ position: relative;
344
+
345
+ width: 9999em;
346
+
347
+ }
348
+
349
+ .s_contents:after {
350
+
351
+ content: "."; display: block; height: 0; clear: both; visibility: hidden; line-height: 0;
352
+
353
+ }
354
+
355
+ .s_contents .s {
356
+
357
+ float: left;
358
+
359
+ width: 960px;
360
+
361
+ margin-right: 10px;
362
+
363
+ }
364
+
365
+
366
+
367
+ </style>
368
+
369
+ </head>
370
+
371
+
372
+
373
+
374
+
375
+ <body id="top">
376
+
377
+
378
+
379
+
380
+
381
+ <div id="container">
382
+
383
+
384
+
385
+
386
+
387
+
388
+
389
+
390
+
391
+
392
+
393
+
394
+
395
+ <section id="recruit">
396
+
397
+ <header><div class="w">
398
+
399
+ <ul class="wow fadeInDown animated" data-wow-duration="0.5s" data-wow-delay="0.5s" data-wow-offset="100" style="visibility: visible;-webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s;-webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; animation-delay: 0.5s;">
400
+
401
+ <li><a href="#" class="current">タブ1</a></li>
402
+
403
+ <li><a href="#" class="">タブ2</a></li>
404
+
405
+ </ul>
406
+
407
+ </div></header>
408
+
409
+
410
+
411
+ <div class="contents w">
412
+
413
+ <div class="s_contents" style="left: 0px;">
414
+
415
+ <section id="staff" class="s test">
416
+
417
+ <div class="row">
418
+
419
+ <div class="" style="height:500px; border:1px solid #FF00FF; background:#FFF;">
420
+
421
+
422
+
423
+ ないようみじかいよう。タブ1
424
+
425
+
426
+
427
+ </div>
428
+
429
+ </div><!-- /.row -->
430
+
431
+ </section><!-- #staff -->
432
+
433
+
434
+
435
+
436
+
437
+ <section id="staffinfo" class="s test">
438
+
439
+ <div class="row ">
440
+
441
+ <div class="naiyou" style="height:1200px; border:1px solid #FF0000; background:#FFF;">
442
+
443
+
444
+
445
+ ないよう長いよう。タブ2
446
+
447
+
448
+
449
+ </div><!-- /.naiyou -->
450
+
451
+ </div><!-- /.row -->
452
+
453
+ </section><!-- #staff -->
454
+
455
+
456
+
457
+ <!-- /.s_contents --></div>
458
+
459
+ <!-- /.contents --></div>
460
+
461
+ <!-- /#recruit --></section>
462
+
463
+
464
+
465
+ <footer id="footer">
466
+
467
+ <!-- /#footer --></footer>
468
+
469
+
470
+
471
+ <!-- /#container --></div>
472
+
473
+
474
+
475
+
476
+
477
+
478
+
479
+ </body></html>
66
480
 
67
481
  ```
68
-
69
-
70
-
71
-
72
-
73
- ```
74
-
75
- <section id="recruit">
76
-
77
- <header><div class="w">
78
-
79
- <ul class="wow fadeInDown" data-wow-duration="0.5s" data-wow-delay="0.5s" data-wow-offset="100">
80
-
81
- <li><a href="#" class="current">タブ1</a></li>
82
-
83
- <li><a href="#">タブ2</a></li>
84
-
85
- </ul>
86
-
87
- </div></header>
88
-
89
-
90
-
91
- <div class="contents w">
92
-
93
- <div class="s_contents">
94
-
95
- <section id="staff" class="s test" >
96
-
97
- <div class="row">
98
-
99
- <div class="" style="height:500px; border:1px solid #FF00FF;">
100
-
101
-
102
-
103
- ないようみじかいよう。タブ1
104
-
105
-
106
-
107
- </div>
108
-
109
- </div><!-- /.row -->
110
-
111
- </section><!-- #staff -->
112
-
113
-
114
-
115
-
116
-
117
- <section id="staffinfo" class="s test">
118
-
119
- <div class="row ">
120
-
121
- <div class="naiyou" style="height:1200px; border:1px solid #FF0000; overflow: auto">
122
-
123
-
124
-
125
- ないよう長いよう。タブ2
126
-
127
-
128
-
129
- </div><!-- /.naiyou -->
130
-
131
- </div><!-- /.row -->
132
-
133
- </section><!-- #staff -->
134
-
135
-
136
-
137
- <!-- /.s_contents --></div>
138
-
139
- <!-- /.contents --></div>
140
-
141
- <!-- /#recruit --></section>
142
-
143
- ```

2

表示を修正しました。

2017/05/19 04:39

投稿

fnwakc
fnwakc

スコア15

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,77 @@
1
+ Animate.cssとwow.jsを使ってサイトを横にスライドさせております。
2
+
3
+
4
+
5
+ タブをクリックすると
6
+
7
+ floatさせているsectionを-970スライドさせるという処理を行っています。
8
+
9
+ しかし、見えていないsectionの高さに影響されて、
10
+
11
+ 短いsectionが見えている時に、空白が入ってしまいます。
12
+
13
+
14
+
15
+ これを見えていない時のsectionの高さをheight0にすることは可能でしょうか。
16
+
17
+ 宜しくお願いいたします。
18
+
19
+
20
+
21
+ ```
22
+
23
+ function setContentChange() {
24
+
25
+ var slide = function(ele, nav, n) {
26
+
27
+ ele.stop().animate({left: -n*970}, 600, 'easeInOutCubic');
28
+
29
+ var cn = nav.eq(n);
30
+
31
+ nav.not(cn).removeClass('current');
32
+
33
+ cn.addClass('current');
34
+
35
+ }
36
+
37
+
38
+
39
+ $('#container > section').each(function(i) {
40
+
41
+ var sc = $('.s_contents' ,this);
42
+
43
+
44
+
45
+ if(sc.length > 0) {
46
+
47
+ var nav = $('> header li a', this);
48
+
49
+ nav.each(function(i) {
50
+
51
+ $(this).on('click', function() {
52
+
53
+ slide(sc, nav, i)
54
+
55
+ return false;
56
+
57
+ })
58
+
59
+ })
60
+
61
+ }
62
+
63
+ })
64
+
65
+ }
66
+
67
+ ```
68
+
69
+
70
+
71
+
72
+
73
+ ```
74
+
1
75
  <section id="recruit">
2
76
 
3
77
  <header><div class="w">
@@ -48,7 +122,7 @@
48
122
 
49
123
 
50
124
 
51
- ないよう長いよう。タブ2
125
+ ないよう長いよう。タブ2
52
126
 
53
127
 
54
128
 
@@ -65,3 +139,5 @@
65
139
  <!-- /.contents --></div>
66
140
 
67
141
  <!-- /#recruit --></section>
142
+
143
+ ```

1

表示

2017/05/19 01:06

投稿

fnwakc
fnwakc

スコア15

test CHANGED
File without changes
test CHANGED
@@ -1,116 +1,50 @@
1
- Animate.cssとwow.jsを使ってサイトを横にスライドさせております。
1
+ <section id="recruit">
2
2
 
3
- タブをクリックするとfloatさせているsectionが横に-970移動するという処理をしています。
3
+ <header><div class="w">
4
4
 
5
- しかしひとつのsectionが高いと、短い方のsectionの高さと同じになり、白い空白ができてしまいます。
5
+ <ul class="wow fadeInDown" data-wow-duration="0.5s" data-wow-delay="0.5s" data-wow-offset="100">
6
6
 
7
+ <li><a href="#" class="current">タブ1</a></li>
8
+
7
- 見えていないsectionの高さを0にするという処理は入れられますでしょうか。宜しくお願いいたします。
9
+ <li><a href="#">タブ2</a></li>
10
+
11
+ </ul>
12
+
13
+ </div></header>
8
14
 
9
15
 
10
16
 
11
- > ```
17
+ <div class="contents w">
12
18
 
13
- function setContentChange() {
19
+ <div class="s_contents">
14
20
 
15
- var slide = function(ele, nav, n) {
21
+ <section id="staff" class="s test" >
16
22
 
17
- ele.stop().animate({left: -n*970}, 600, 'easeInOutCubic');
23
+ <div class="row">
18
24
 
19
- var cn = nav.eq(n);
20
-
21
- nav.not(cn).removeClass('current');
25
+ <div class="" style="height:500px; border:1px solid #FF00FF;">
22
-
23
- cn.addClass('current');
24
-
25
- }
26
26
 
27
27
 
28
28
 
29
- $('#container > section').each(function(i) {
30
-
31
- var sc = $('.s_contents' ,this);
29
+ ないようみじかいよう。タブ1
32
30
 
33
31
 
34
32
 
35
- if(sc.length > 0) {
33
+ </div>
36
34
 
37
- var nav = $('> header li a', this);
35
+ </div><!-- /.row -->
38
36
 
39
- nav.each(function(i) {
40
-
41
- $(this).on('click', function() {
42
-
43
- slide(sc, nav, i)
44
-
45
- return false;
46
-
47
- })
48
-
49
- })
50
-
51
- }
52
-
53
- })
54
-
55
- }
56
-
57
- ```
58
-
59
-
60
-
61
- ```
62
-
63
-
64
-
65
- <section id="recruit">
66
-
67
- <header><div class="w">
68
-
69
- <ul class="wow fadeInDown" data-wow-duration="0.5s" data-wow-delay="0.5s" data-wow-offset="100">
70
-
71
- <li><a href="#" class="current">タブ1</a></li>
72
-
73
- <li><a href="#">タブ2</a></li>
74
-
75
- </ul>
76
-
77
- </div></header>
78
-
79
-
80
-
81
- <div class="contents w">
82
-
83
- <div class="s_contents">
84
-
85
- <section id="staff" class="s test" >
86
-
87
- <div class="row">
88
-
89
- <div class="" style="height:500px; border:1px solid #FF00FF;">
90
-
91
-
92
-
93
- ないようみじかいよう。タブ1
94
-
95
-
96
-
97
- </div>
98
-
99
- </div><!-- /.row -->
100
-
101
- </section><!-- #staff -->
37
+ </section><!-- #staff -->
102
38
 
103
39
 
104
40
 
105
41
 
106
42
 
43
+ <section id="staffinfo" class="s test">
107
44
 
45
+ <div class="row ">
108
46
 
109
- <section id="staffinfo" class="s test">
110
-
111
- <div class="row ">
112
-
113
- <div class="naiyou" style="height:1200px; border:1px solid #FF0000; overflow: auto">
47
+ <div class="naiyou" style="height:1200px; border:1px solid #FF0000; overflow: auto">
114
48
 
115
49
 
116
50
 
@@ -118,24 +52,16 @@
118
52
 
119
53
 
120
54
 
121
- </div><!-- /.naiyou -->
55
+ </div><!-- /.naiyou -->
122
56
 
123
- </div><!-- /.row -->
57
+ </div><!-- /.row -->
124
58
 
125
- </section><!-- #staff -->
59
+ </section><!-- #staff -->
126
60
 
127
61
 
128
62
 
63
+ <!-- /.s_contents --></div>
129
64
 
130
-
131
-
132
-
133
- <!-- /.s_contents --></div>
134
-
135
- <!-- /.contents --></div>
65
+ <!-- /.contents --></div>
136
66
 
137
67
  <!-- /#recruit --></section>
138
-
139
-
140
-
141
- ```