追加は、私は別のものを削除した後に要素を追加しようとしている何も

Question

しません：

$("a.III").click(function(e) { 
    var element = '<div class="tagul" data-tagul-src="//cdn.tagul.com/json/6vvgt1xyerus"></div>'; 

    e.preventDefault(); 
    $("div.tagul").fadeOut("slow", function(e) { 
     $("div.tagul").remove(); 
     $("span.content.left").append(element); 
     $("div.tagul").fadeIn("slow"); 
    }) 
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
<span class="content left" style="float: left;"> 
    <div class="tagul" data-tagul-src="//cdn.tagul.com/json/aup6249sa1ew"></div> 
</span> 
<span class="content" style="float: right"> 

</span> 

何が古いのdivのフェードアウト後に起こりません。私は、新しい要素を追加しようとしている間、何か間違っていると思います。

Answer 1

あなたのコードはうまくいきます。問題は、削除/追加しているdivにコンテンツがない可能性が高いため、動作していることがわかりません。ここにあなたの正確なコードですが、divタグ内のコンテンツとあなたが実際にスクリプトが（私はあなたのポストに含めるのを忘れてと仮定していIIIのクラスにanchorを追加しました）ワーキング見ることができます：

$("a.III").click(function(e) { 
 

 
    e.preventDefault(); 
 
    
 
    var element = '<div class="tagul2" data-tagul-src="//cdn.tagul.com/json/6vvgt1xyerus">Tagul 2</div>'; 
 
    
 
    $("div.tagul").fadeOut("slow", function(e) { 
 
    $("div.tagul").remove(); 
 
    $("span.content.left").append(element); 
 
    $("div.tagul2").fadeIn("slow"); 
 
    }); 
 
});

a.III { 
 
    display:block; 
 
    margin-bottom:20px; 
 
} 
 

 
.tagul2 { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="III">Click me</a> 
 

 
<span class="content left" style="float: left;"> 
 
    <div class="tagul" data-tagul-src="//cdn.tagul.com/json/aup6249sa1ew">Tagul</div> 
 
</span> 
 
<span class="content" style="float: right"> 
 
\t \t \t 
 
</span>

さらに、divがデフォルトで表示するように設定されているため（実質的には表示されている要素をフェードインしようとしているため）、追加された要素のfadeIn()関数は実際に何も行いません。フェードインするには、追加している要素のクラスを変更し、CSSをdisplay:none;に設定してから、要素が追加された後にフェードインします（私はこの変更を自分の答えに加えました）。