jQuery：最初のクリックでボックスが折り畳まれるのはなぜですか

Question

私たちのウェブサイト（legendboats.com）のホームページは4つの小さなセルで、クリックすると大きな画像が変わります。かなり標準的なものですが、問題があります。

初めて画像をクリックすると、新しい画像が再表示される前に大きな領域が崩壊します。これは再び起こりません。さまざまな画像をクリックし続けると、適切にフェードイン/フェードインされます。

$('.home_boxes a.content_box').on('click', function(e) { 
    e.preventDefault(); 
    var new_slide = this.hash; 
    $('#home_box div.active').fadeOut(function() { 
     $('#home_box ' + new_slide).fadeIn().addClass('active'); 
    }).removeClass('active'); 

}); 

私が間違ってやって上の任意のアイデア、またはいずれかの改善点：ここで私が使用しているコードはありますか？

Answer 1

私はなぜそれが起こるのかわかりませんが、私は症状を見ることができます。最初のクリックで何らかの理由でコンテンツが崩壊します。これにより、奇数の点滅が発生します。 home_boxにmin-heightを設定すると、それをソートします。

#home_box { min-height: 482px; } 

Answer 2

$('.home_boxes a.content_box').on('click', function(e) { 
    e.preventDefault(); 
    var new_slide = this.hash; 
    $('#home_box div.active').fadeOut(function() { 
     var parent = this; 
     $('#home_box ' + new_slide).fadeIn(function(){ 
      //You can shuffle following two lines and try 
      $(parent).removeClass('active'); 
      $(this).addClass('active'); 
     }); 
    }); 
}); 

希望これはあなたの作品をこのようにやってみてください。

Answer 3

class = "active"を削除しているため、折りたたまれています。

jQueryが、欠落しているclass = "active"を上書きするインラインスタイル "display：block"を追加しているため、最初から崩壊しない理由があります。当初

：その後

<div id="standard_equipment" class="active"> 

：

<div id="more_power" style="display: block;" class="active">