コールバックが正しく機能しない

Question

私は迷っています。このコードでは、#optionsはフェードインする必要がありますが、そうではありません。 CSSの属性は設定されています。

$("#content > p").animate({ opacity: '0' }, function() { 
    $(this).css("display", "none"); 
    $("#options").css("opacity", "0").show(0, function() { 
     $("#options").fadeIn(); 
    }); 
}); 

Answer 1

opacityはまだ0として設定されています。

あなたはfadeIn()に...

$("#options").animate({ opacity: 1}, 500); 

jsFiddleを変更することができます。

Answer 2

コードを単純化することができます。不透明度を0に設定するとvisibility:hidden CSS属性が複製されますが、​​はdisplay:none CSS属性を複製します。これら2つの重要な違いの1つは、後者がレンダリングされたDOMから要素を削除し、画面上のスペースを占有せず、周囲のノードがその要素を認識しないことです。前者は、要素がまだである大きな空のボックスを作成しますが、それを見ることはできません。それが動作するはずのよう

$('#content > p').fadeOut('slow', function() { 
    $('#options').fadeIn(); 
}); 

Answer 3

がようだが、どうやらあなたはfadeIn()^[docs]メソッドの代わりにfadeTo()^[docs]メソッドを使用する必要があるだろう：あなたが最も一般的である後者を使用したいと仮定すると、これは動作するはずです。

$('img').css("opacity", 0).show(0,function() { 
    $(this).fadeTo(400, 1); 
}); 

---

あなただけ行うことができるときshow(0,func..は、ここでちょっと無意味に見えるが：

$('img').css("opacity", 0).show().fadeTo(400, 1); 

...あなたが.show()期間に与えている0が実際にその変数でない限り、より大きい数を参照することがあります。