Animate.cssとwow.jsを使ってサイトを横にスライドさせております。

タブをクリックすると
floatさせているsectionを-970スライドさせるという処理を行っています。
しかし、見えていないsectionの高さに影響されて、
短いsectionが見えている時に、空白が入ってしまいます。

これを見えていない時のsectionの高さをheight0にすることは可能でしょうか。
宜しくお願いいたします。

<html lang="ja"><head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>テスト</title>
<meta http-equiv="content-script-type" content="text/javascript">

<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css" type="text/css" media="all">
<script src="http://cosablog.minibird.jp/wow/js/wow.js"></script>

<script>
$(function() {});

/* setSpNav
============================================================================================================ */
function setSpNav() {
	var b = $('#header nav p a'),
		w = $('#header'),
		e = $('#header nav li'),
		c = 'open',
		cs = 'showed';

	b.on('click', function() {
		w.addClass(cs).toggleClass(c);
		return false;
	})
	var end_events = ['webkitTransitionEnd','oTransitionEnd','otransitionend','transitionend'],
		end_event = end_events.join(' ');

	e.on(end_event, function() {
		if(!w.hasClass(c)) w.removeClass(cs);
	});

	$('a', e).on('click', function() {
		if(w.hasClass(c)) w.removeClass(c);
	});
}

jQuery.extend( jQuery.easing,{
	easeInOutCubic: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t + b;
		return c/2*((t-=2)*t*t + 2) + b;
	},


});

</script>



<script>
$(function() {
	setContentChange();
});

function setContentChange() {
	var slide = function(ele, nav, n) {
		ele.stop().animate({left: -n*970}, 600, 'easeInOutCubic');
		var cn = nav.eq(n);
		nav.not(cn).removeClass('current');
		cn.addClass('current');
	}

	$('#container > section').each(function(i) {
		var sc = $('.s_contents' ,this);

		if(sc.length > 0) {
			var nav = $('> header li a', this);
			nav.each(function(i) {
				$(this).on('click', function() {
					slide(sc, nav, i)
					return false;
				})
			})
		}
	})
}
</script>
<style>
ol, ul {
	list-style: none;
}
.w {
	width: 960px;
	margin: 0 auto;
	padding: 0 10px;
}
#container > section > header {
	background-color: #fff;
}
#container > section > header .w {
	position: relative;
	height: 180px;
}
#container > section > header h2 {
	position: absolute;
	right: 10px;
	top: 0;
	padding-top: 95px;
	text-align: right;
	font-size: 16px;
	font-size: 1.6rem;
}
#container > section > header ul {
	position: absolute;
	left: 10px;
	bottom: 0;
}
#container > section > header ul li {
	float: left;
	margin-right: 5px;
}
#container > section > header ul li a {
	display: table-cell;
	width: 180px;
	height: 60px;
	padding-left: 0.2em;
	background-color: #b9b9b9;
	text-align: center;
	vertical-align: middle;
	color: #fff;
	letter-spacing: 0.2em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: background 0.2s;
	-o-transition: background 0.2s;
	transition: background 0.2s;
}
#container > section > header ul li a:hover,
#container > section > header ul li a.current {
	background-color: #282828;
	text-decoration: none;
}
#container > section > header ul li a.current {
	cursor: default;
}


/* コンテナ
============================================================================================================ */
#container {
	position: relative;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.9;
	z-index: 10;
}
#container > section {
	overflow: hidden;
	position: relative;
	margin-bottom: 300px;
	z-index: 10;
	background:#CCC;
}

/* s_contents
============================================================================================================ */
.s_contents {
	position: relative;
	width: 9999em;
}
.s_contents:after {
	content: "."; display: block; height: 0; clear: both; visibility: hidden; line-height: 0;
}
.s_contents .s {
	float: left;
	width: 960px;
	margin-right: 10px;
}

</style>
</head>


<body id="top">


<div id="container">






<section id="recruit">
 <header><div class="w">
  <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;">
   <li><a href="#" class="current">タブ１</a></li>
   <li><a href="#" class="">タブ２</a></li>
  </ul>
 </div></header>

<div class="contents w">
  <div class="s_contents" style="left: 0px;">
  <section id="staff" class="s test">
   <div class="row">
   <div class="" style="height:500px; border:1px solid #FF00FF; background:#FFF;">

ないようみじかいよう。タブ1

   </div>                                               
   </div><!-- /.row -->
  </section><!-- #staff -->


  <section id="staffinfo" class="s test">
   <div class="row ">
   <div class="naiyou" style="height:1200px; border:1px solid #FF0000; background:#FFF;">

						ないよう長いよう。タブ2

   </div><!-- /.naiyou -->
   </div><!-- /.row -->
  </section><!-- #staff -->

<!-- /.s_contents --></div>
<!-- /.contents --></div>
<!-- /#recruit --></section>

<footer id="footer">
<!-- /#footer --></footer>

<!-- /#container --></div>



</body></html>

退会済みユーザー

2017/05/19 00:21

表示がおかしくなっていますよ

fnwakc

2017/05/19 01:06

すいません。ありがとうございます！

行動規範の内容に同意します

回答1件

どういったライブラリかがわからないので状況がわかりませんが、こういうことでしょうか。

CSS
1#container > section{
2    height: 0;
3    overflow: hidden;
4}
5#container > section.current {
6    height: auto;
7}

投稿2017/05/19 02:36

kei344

総合スコア69407

fnwakc

2017/05/19 02:53

ありがとうございます！ currentは <li><a href="#" class="current">タブ１</a></li> <li><a href="#">タブ２</a></li> についちゃうクラスです。非表示のsectionにheight0のクラスを当てられたらと思います。初心者で申し訳ないです。。。

kei344

2017/05/19 02:58

【GitHub - matthieua/WOW: Reveal CSS animation as you scroll down a page】 https://github.com/matthieua/WOW これですか？スクロールをベースに動くライブラリなら height: 0; にするほうが問題が出そうです。少なくとも質問文に書かれている情報だけでは問題の再現が出来ないと思います。問題が起きるサイトのURL、もしくは状況の再現が可能なHTML/CSSを質問文に追記ください。

fnwakc

2017/05/19 04:40

ありがとうございます。そうです。単独で動くように修正しました。もしお分かりなら教えて頂けると助かります。

kei344

2017/05/19 04:58

ああ、こういうことですか。 https://jsfiddle.net/7x50zk2x/ カレントの要素の height を取得して .s_contents に設定すればよいと思います。

fnwakc

2017/05/19 06:04

https://jsfiddle.net/4nyk5Loe/4/ すいません。なぜか動きませんが…。 <script> $(function() { setContentChange(); }); function setContentChange() { var slide = function(ele, nav, n) { ele.stop().animate({left: -n*970}, 600, 'easeInOutCubic'); ele.removeClass('slide_on'); var cn = nav.eq(n); nav.not(cn).removeClass('current'); cn.addClass('current'); $(".test :not(.slide_on)").css({"height": " auto"}); } $('#container > section').each(function(i) { var sc = $('.s_contents' ,this); if(sc.length > 0) { var nav = $('> header li a', this); nav.each(function(i) { $(this).on('click', function() { $(".test").addClass('slide_on'); slide(sc, nav, i) return false; }) }) } }) } </script> <section id="staff" class="s test"> セクションのクラスにtestを付けてみました。でも交互に行かないようです。

kei344

2017/05/19 06:14

エラー見てますか？コンソールは確認しましょう。【開発者ツールを使おう！カスタマイズするphpファイルを探す-その1 | RYUS blog】 http://ryus.co.jp/blog/customize-php-search-1/ また、コメント欄ではコードブロックが使えないため、質問文に追記されることをお勧めします。

fnwakc

2017/05/19 10:36

いろいろと教えて下さりありがとうございます！引き続き調べています。

行動規範の内容に同意します