ajaxでhtmlを取得後、fadeInやfadeOutの動作がおかしい

Question

ログインの文字をjqueryで点滅させているのですが、あるボタンをクリックしてajaxで取得後、点滅の挙動がおかしくなります。(点滅はしますがフェードインとフェードアウトがなくなります)。非同期通信がアニメーション処理に影響を及ぼしているのかわかりません。そのほか、slideToggleもおかしくなります。エラーはでません。再現性はあるので、解決できると思います。jQuery.Deferred等で解決するのか？どなたかご存知の方教えていただければ幸いです

＃＃＃html5

<p id="p-content-login">login ...</p> <div id="contents"> ajax取得後、ここにhtmlが入る </div><!-- /#contents -->

＃＃＃jquery

(function(){

// ログインの点滅
setInterval(function() {
$('#p-content-login').fadeOut('slow', function() {
$(this).fadeIn('slow');
});
}, 5000);

// メニューのアクセス一覧ボタン
$(document).on('click', "#li-content-button-menu-access-list", function(){

	var data_post = {"menu_access_list":"1","key":$("#input-second-content-menu-key").val()};
	
	ajax(data_post).done( function(data){
					
					if(data == "false"){
						alert("取得できません");
						//password_error();		
					} else {
						//$("#contents" ).empty().append(data.content).trigger("create");
						//data = $.parseJSON(data)
						$("#contents").empty().append(data).trigger("create");
					}
		
	}).fail( function(data){			
			alert("接続できません");
			//password_error();
	});
});

// ajaxのpost
function ajax(data_post){

	return $.ajax({
   					url: host,
					type:'POST',
					data: data_post
					})
}

});//jquery

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[x_x]

負荷が高まっているかもしれません。開発者ツールでパフォーマンスを調べてもらえるでしょうか？