jQuery：爲什麼通過第一次點擊框崩潰

我們網站（legendboats.com）的主頁是4個小單元格，如果點擊，大圖像會改變。相當標準的東西，但有一個問題。jQuery：爲什麼通過第一次點擊框崩潰

當您第一次點擊其中一個時，在新圖像重新出現之前，大面積會崩潰。這不會再發生，你可以繼續點擊不同的圖像，它們會淡入淡出。下面是我使用的代碼：

$('.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'); 

});

在我做錯了任何想法，或任何改進？

來源

2012-02-10 WebDevDude

嗯，我不知道爲什麼會發生，但我可以看到症狀。出於某種原因，首先點擊內容會崩潰。這會導致奇怪的閃爍。如果您在home_box上設置最小高度，則將其排序。

#home_box { min-height: 482px; }

來源

2012-02-10 03:46:44 mrtsherman

試着做這樣

$('.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'); 
     }); 
    }); 
});

希望這個作品你。

來源

2012-02-10 03:47:17

因爲您刪除class =「active」而崩潰。

第一次之後它沒有崩潰的原因是因爲jQuery添加了一個內聯樣式「display：block」，它覆蓋了缺失的class =「active」。

最初：

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

隨後：

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

來源

2012-02-10 03:50:57 Panetta

有道理。我能做些什麼來解決這個問題？我需要將課程移除，並且我需要隱藏其他框。 – WebDevDude 2012-02-10 17:30:13

簡單的解決方案是使用單詞go中的display：block樣式來定位div（無論您是使用CSS執行此操作還是使用inline都由您決定）。或者，您可以確保活動類在最後被移除，而不是在動畫開始時移除。 – Panetta 2012-02-16 22:53:19

jQuery：爲什麼通過第一次點擊框崩潰

回答

相關問題