jQuery fadeOutは表示プロパティを変更していません

Question

オンhttp://judi.simpleupdates.com/ jQuery fadeInとfadeOutエフェクトを使用して、ページに画像のスライドショーを作成しようとしています。どちらの商品も問題ありません。fadeInただし、fadeOutは、表示されなくなるはずのdivのdisplayのプロパティを変更していません。これが期待どおりに機能しない理由は何ですか？

これが失敗している行です。

$(".carousel_item:nth-child(" + selected + ")").fadeOut(600); 

UPDATE：問題がwidthとheightを持っていない要素にfadeOutであると思われます。 widthとheightのプロパティに値を追加すると、div.carousel_itemのfadeOutコールが正常に動作します。別の方法は、子孫imgからposition: absoluteを削除してdivをimgディメンションに成長させることです。

Answer 1

widthとheightを持たない要素には、問題はfadeOutと思われます。 widthとheightプロパティに値を追加すると、div.carousel_itemのfadeOutコールが正常に動作します。もう1つの方法は、子孫imgからposition: absoluteを削除してdivをimgディメンションに成長させることです。

ご協力いただきありがとうございます。

Answer 2

HTMLの表示設定を<div id="txt2" class="carousel_item" style="display: none; ">に変更すると、fadeIn/fadeOutが正しくトリガーされます。

またにjQueryのを変更する必要があります。 $(".carousel_item:nth-child(" + selected + ")").fadeOut(600).hide();

あなたは両方のdisplay: blockに設定されているアイテムにフェードイン/フェードアウトを呼んでいます。働くためには別の状態が必要です。

UPDATEにあなたのjsにshowhide（）関数を変更し、あなたのサイトのローカルコピーをダウンロードした後 ：私のテストで

var inc = 1 
function showhide(current) { 
    if (inc == 1) current = 2; 
    $(".carousel_item:nth-child(" + selected + ")").fadeIn(600); 
    $(".carousel_item:nth-child(" + current + ")").fadeOut(600).hide(); 
    selected = current; 
    inc++; 
} 

作品。うまくいけば、それはあなたのために働く。最初の数がselectedとcurrentを1に設定しているようにカウンタを追加しました。

Answer 3

jQueryセレクタで現在の変数と選択した変数を置き換えてください。私がそれを理解したら、あなたは現在のものをフェードアウトし、選択したものをフェードインしたいと思っていますか？