jQuery タブの切り替えでfadeの動きを付けたい

Question

マウスオーバーでタブの切り替えをしました。
マウスオーバーでコンテンツが切り替わる際にそのまま切り替わるのではなく
fadein fadeoutの、ふわっとした動きを付けたいのですが
ここからどのように付け足せば良いでしょうか。

よろしくお願い致します。

実装したものがこちらです

   <ul id="tab" class="clearfix">
      <li class="select"><a href="/page1/">1</a></li>
      <li><a href="/page2/">2</a></li>
      <li><a href="/page3/">3</a></li>
      <li><a href="/page4/">4</a></li>
      <li><a href="/page5/">5</a></li>
   </ul>
   <div class="content_wrap">
コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1
   </div>
   <div class="content_wrap disnon">
コンテンツ2コンテンツ2コンテンツ2コンテンツ2コンテンツ2コンテンツ2コンテンツ2コンテンツ2コンテンツ2コンテンツ2コンテンツ2コンテンツ2コンテンツ2コンテンツ2
   </div>
   <div class="content_wrap disnon">
コンテンツ3コンテンツ3コンテンツ3コンテンツ3コンテンツ3コンテンツ3コンテンツ3コンテンツ3コンテンツ3コンテンツ3コンテンツ3コンテンツ3コンテンツ3コンテンツ3コンテンツ3
   </div>
   <div class="content_wrap disnon">
コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4
   </div>
   <div class="content_wrap disnon">
コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5
   </div>

   .disnon {
      display: none;
   }

      $(function() {
         $("#tab li").hover(function() {
      var num = $("#tab li").index(this);
      $(".content_wrap").addClass('disnon');
      $(".content_wrap").eq(num).removeClass('disnon');
      $("#tab li").removeClass('select');
      $(this).addClass('select')
         });
      });

Comments

[kei344]

CSSが質問文に提示されているものだけでは状態が再現できません。追記していただけませんか？

[yukabyo]

ありがとうございます。https://jsfiddle.net/bax6se7w/ このURLでは、確認できませんでしょうか？

[kei344]

質問文には文字数制限で入りませんか？

[yukabyo]

質問文とリンク先の内容は同じになっており、質問文内にもリンクを入れておりますが、リンクの飛び先では動きが確認できていたので、質問文に何を追記すればいいのかわからず、申し訳ありません。また、今回は先程別の方が下さった回答で解決できそうです。kei様いつもご回答くださりありがとうございます。

Answer 1

CSSのtransition指定を使えばフェードイン・フェードアウトはクラスの付け外しだけで実現可能です。
display:noneによる非表示はtransition効果をつけれませんので、opacityを変化させてフェードアウトさせ、transitionendイベントのタイミングで消します。
フェード中は同じ位置にコンテンツが重なっていないといけないので、position:absoluteも利用します。

<ul id="tab" class="clearfix">
	<li class="select"><a href="/page1/">1</a></li>
	<li><a href="/page2/">2</a></li>
	<li><a href="/page3/">3</a></li>
	<li><a href="/page4/">4</a></li>
	<li><a href="/page5/">5</a></li>
</ul>
<div class='area'>
   <div class="content_wrap">
コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1コンテンツ1
   </div>
   <div class="content_wrap disnon">
コンテンツ2コンテンツ2コンテンツ2コンテンツ2コンテンツ2コンテンツ2コンテンツ2コンテンツ2コンテンツ2コンテンツ2コンテンツ2コンテンツ2コンテンツ2コンテンツ2
   </div>
   <div class="content_wrap disnon">
コンテンツ3コンテンツ3コンテンツ3コンテンツ3コンテンツ3コンテンツ3コンテンツ3コンテンツ3コンテンツ3コンテンツ3コンテンツ3コンテンツ3コンテンツ3コンテンツ3コンテンツ3
   </div>
   <div class="content_wrap disnon">
コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4コンテンツ4
   </div>
   <div class="content_wrap disnon">
コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5コンテンツ5
   </div>
</div>

.disnon {
	opacity: 0;
}
.area {
	position :relative;
}
.content_wrap{
	position : absolute;
	top : 0px;
	transition: 300ms ease-out;
}

$(function() {
	$("#tab li").hover(function() {
		var num = $("#tab li").index(this);
		$(".content_wrap").addClass('disnon');
		$(".content_wrap").eq(num).removeClass('disnon').show();
		$("#tab li").removeClass('select');
		$(this).addClass('select')
	});
	$(".content_wrap").on("transitionend",function(){
		if ($(this).hasClass("disnon")){
			$(this).hide();
		}
	});
});

Comments

[yukabyo]

とてもわかりやすい説明で理解できました。
こちらのコードでできましたので、使わせていただきます。
ご回答くださりありがとうございます！