タブ切り替えアニメーション

Question

ナビをクリック後にタグを切り替えたいのですが、ほとんどのHTMLパーツは共通です。(一部はほんとに切り替える)
しかし、まるですべてが切替わったかのように見せたいです。一度、フォームをすべてフェードアウトして
すぐにフェードインさせる。

上記のようなことを行う場合、javascriptではどのようなタイミングでイベントを発火させれば良いでしょうか？
ナビのクリックイベントにhide()とshow()を入れましたが、失敗しました。(切り替わっているが、早すぎて全パーツではなく違うところのみ切り替わっているように見える。)

$('.searchTab__item').on("click", function(){
  var dataTab = $(this).data('tab');			
  $('#airtab, #jrtab').hide();
  $('#' + dataTab + 'tab').show();
  $('.searchTab__item').removeClass("selected");
  $(this).addClass("selected");
});

空港と駅を切り替えたい。
HTMLパーツが共通なので入力された後に(submit押さずに)タグ切り替え押したら、値が入力済みですが問題ありません。

		<ul class="searchTab">
			<li  class="searchTab__item selected" data-tab="jr">hoge</li>
			<li  class="searchTab__item" data-tab="air">hoge</li>
		</ul>

			<form id="form" name="form" action="/" target="_blank" method="post">

				<div class="dateArea">
					<div class="startDate">
						<input type="text" id="startStation" value="" placeholder="日付" readonly="readOnly">
					</div>
					<div class="endDate">
						<input type="text" id="endCalenderStation" value="" placeholder="日付" readonly="readOnly">
					</div>
				</div>
				<div id="jrtab">
					<div class="stationArea">
						<div class="startStation">
							<p class="tab-contentP">出発駅</p>
								<input type="text" class="startStationInput" value="" placeholder="駅名を選択">
							</div>
						</div>
						<div class="arriveStation">
							<p class="tab-contentP" style="text-align: right">到着駅</p>
							<input type="text" value="" class="arriveStationInput" placeholder="駅名を選択">
						</div>
					</div>
				</div>
				<div id="airtab" style="display:none;">
					<div class="airArea">
						<div class="startAirport">
							<p class="tab-contentP">出発空港</p>
							<input  class="startAirInput" type="text" name="" value="" placeholder="空港">
						</div>
						<div class="arriveAirport">
							<p class="tab-contentP" style="text-align: right">到着空港</p>
							<input class="arriveAirInput" type="text" name="" value="" placeholder="空港">

						</div>
					</div>
				</div>
				<div class="lodgmentPlaceArea">
					<p class="tab-contentP">宿泊地</p>
					<input type="text" id="stayplacedisplay" value="" placeholder="都道府県" class="lodgmentPlaceAreaInput">
				</div>
				<div class="countHumanArea">
					<p class="tab-contentP">人数</p>
					<input type="text" name="" value="" placeholder="2名・1室"  id="countHumanInput">
				</div>
				<div class="countRoomArea">
					<p class="tab-contentP">室数</p>
					<input type="text" name="" value="" placeholder="2名・1室"  id="countRoomInput">
				</div>
				<input type="submit" value="検 索" class="btn btn-lg">
			</form>

Answer 1

こういうことですか？

$(function(){
  $('.searchTab__item').on("click", function(){
    var dataTab = $(this).data('tab');
    $('#jrtab,#airtab').hide();
    $('#' + dataTab + 'tab').show();
    $('body').hide().fadeIn();
    $('.searchTab__item').removeClass("selected");
    $(this).addClass("selected");
  }).filter('.selected').trigger('click');
});