。隠れ要素内の.fadeOut（） - 可能性のあるバグ？

Question

はfollowing codeを考える：

<div class='hotel_photo_select'> 
    Hello 
</div> 

<div class='itsHidden' style='display:none'> 
    <div class='hotel_photo_select'> 
     Hello 
    </div> 
</div> 

そして：

$('.hotel_photo_select').fadeOut(300); 
$('.itsHidden').show(); 

私は両方.hotel_photo_selectのdivを非表示にすることを期待します。ただし、コンテナを表示すると、2番目のものは表示されません。

これはjQueryのバグですか？すべての要素はfadeOut（）の後に隠されるはずです。私はエレガント未満であることがわかり

$('.hotel_photo_select').fadeOut(300, function() { 
    $(this).hide(); 
}); 
$('.itsHidden').show(); 

：私は思う

唯一の解決策はこれになります。

Answer 1

技術的には、この種の方法のためにあなたが使用する必要があります'。各（）'。次に、チェックポイントを追加して、親が表示されているかどうかを判断し、表示されていない場合は可視にします。

ただし、親を表示すると、レイアウトに悪影響を与える可能性があります（YES）。しかし、これを行うには良い方法はないので、この種の状況を避けるべきです。

ライブ例：http://jsfiddle.net/QMSzg/21/

$('.hotel_photo_select').each(function() { 
    var this_parent = $(this).parent('div'); 
    if (this_parent.is(':hidden')) { 
     this_parent.show(); 
    } 
    $(this).fadeOut(500); 
}); 

Answer 2

jQuery.fadeOutは、要素を現在の状態から採用する状態（この場合は非表示）に変換します。要素が既に隠されている場合（2番目の出現の場合のように）、jQueryはアクションを実行する必要はありません。第二の「ハロー」のdivの現在の状態があるので

$('.itsHidden .hotel_photo_select').css('display','none'); 

Answer 3

すでに述べたように「ブー」として、「隠された」jQuery.fadeOut（）は適用されません：あなたは何ができるかを具体的に誰にも負けないCSSの表示に設定されていますその上の任意のアニメーション。

「フェードアウトする」というのではなく、「不透明度を0にアニメーションする」と言う必要があります。この場合、jQueryは要素が可視かどうかは気にしません。それが仕事です行います。

$('.hotel_photo_select').animate({opacity:0}, 3000); 

は、ここでそれを参照してください。http://jsfiddle.net/QMSzg/20/

Answer 4

フェードアウトする前に、場所のショーを（）（）

$('.itsHidden').show(); 
$('.hotel_photo_select').fadeOut(300); 

Answer 5

私は同じ問題を抱えていました。要素が隠されている場合、コールバックはすぐに呼び出されます

$('.hotel_photo_select').fadeOut(300, function(){ 
    $('.hotel_photo_select').hide(); 
}); 

この方法： 私のソリューションは、コールバック関数としての要素を非表示にすることでした。