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

它崩溃了，因为你删除了class =“active”。

第一次没有崩溃的原因是因为jQuery添加了一个内联样式“display：block”，它覆盖了缺少的class =“active”。

最初：

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

接着：

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

Answer 2

我不知道为什么会这样，但我可以看到症状。出于某种原因，首次点击内容会崩溃。这导致奇数闪烁。如果你在home_box上设置了一个最小高度，它会将其排序。

#home_box { min-height: 482px; }

Answer 3

尝试这样做

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

希望这对您有用。

jQuery：为什么第一次单击时框会折叠

3 个答案: