防止手风琴DIV消失

Question

我有一个水平手风琴类型的div系列，默认宽度为33.33%。我使用Jquery将其中一个div动画化为60%，将另外两个div动画化为15%，因此我保留了全屏宽度。

然而，悬停在div1或div2上会导致div3 (三行中最右边的div )暂时闪烁或消失(我猜直到Jquery将其动画缩小到不会将其踢到网格中下一行的宽度为止)。

有没有什么方法可以防止这种闪光的发生--也许是CSS的调整？解决方案可能就在我面前，但我不知道如何在不删除网格行为的情况下防止bug。

我的HTML：

<div class="grid grid-pad">
            <div id="div1" class="col-1-3">
                <div class="content">
                    DIV 1
                </div>
            </div>
            <div id="div2" class="col-1-3">
                <div class="content">
                    DIV 2
                </div>
            </div>
            <div id="div3" class="col-1-3">
                <div class="content">
                    DIV 3
                </div>
            </div>
        </div>

CSS：

body {
    margin: 0px;
}

[class*='col-'] {
    float: left;
    padding-right: 20px;
}

[class*='col-']:last-of-type {
    padding-right: 0px;
}

.grid {
    width: 100%;
    min-width: 755px;
    margin: 0 auto;
    overflow: hidden;
}

.grid:after {
    content: "";
    display: table;
    clear: both;
}

.grid-pad {
    padding: 20px 0 0px 20px;
}

.grid-pad > [class*='col-']:last-of-type {
    padding-right: 20px;
}

.push-right {
    float: right;
}

/* Content Columns */

.col-2-3 {
    width: 66.66%;
}

.col-1-3, .col-4-12 {
    width: 33.33%;
}

.col-1-6, .col-2-12 {
    width: 16.667%;
}

#div1 {
    background-color: blue;
    }

#div2 {
    background-color: red;
}

#div3 {
background-color: yellow;
}

和JQuery：

$('#div1').hover(function() {
  $(this).stop(true, true).toggleClass('col-2-3', [1000]),
  $('#div2, #div3').stop(true, true).toggleClass('col-1-6', [1000]);
});

和JSfiddle - http://jsfiddle.net/yysNr/47/

Answer 1

我最终根据乔的回答使用了CSS调整和jQuery调整的组合来实现效果：

HTML：

<div id="parent">
    <div id="second">
      <div id="div1">&nbsp</div><div id="div2">&nbsp</div><div id="div3">&nbsp</div>
    </div>
<div>

CSS：

#parent {
  background-color: white;
  width: 60%;
  overflow-x: hidden;
}

#second {
 white-space: nowrap;
 float: left;
 width: 100%;
 background-color: brown;
 height: 500px;
}

#div1 {
  background-color: tan;
  width: 33.33%;
  height: 100%;
  display: inline-block;
  white-space: normal;
}

#div2 {
  background-color: red;
  width: 33.33%;
  height: 100%;
  display: inline-block;
  overflow: hidden;
}

#div3 {
  background-color: green;
  width: 33.33%;
  height: 100%;
  display: inline-block;
}

jQuery：

$('#div1').hover(function() {
  $('#div2, #div3').stop(true, false).animate({width:'16.67%'}, 500),
  $(this).stop(true, false).animate({width:'66.66%'}, 500);
}, function() {
  $(this).stop(true, false).animate({width:'33.33%'}, 500),
  $('#div2, #div3').stop(true, false).animate({width:'33.33%'}, 500);
});

$('#div2').hover(function() {
  $('#div1, #div3').stop(true, false).animate({width:'16.67%'}, 500),
  $(this).stop(true, false).animate({width:'66.66%'}, 500);
}, function() {
  $(this).stop(true, false).animate({width:'33.33%'}, 500),
  $('#div1, #div3').stop(true, false).animate({width:'33.33%'}, 500);
});

$('#div3').hover(function() {
  $('#div1, #div2').stop(true, false).animate({width:'16.67%'}, 500),
  $(this).stop(true, false).animate({width:'66.66%'}, 500);
}, function() {
  $(this).stop(true, false).animate({width:'33.33%'}, 500),
  $('#div1, #div2').stop(true, false).animate({width:'33.37%'}, 500);
});

结果是：http://jsfiddle.net/cPmDX/

Answer 2

我认为你需要的是对类的添加和删除进行排序，这样div的宽度之和就永远不会超过100%。这意味着在向外悬停时需要使用与向内悬停时不同的顺序，因此第二个函数是有序的，并且需要一个微小的延迟，以确保在缩小的div腾出空间之前，扩展的div不会挤满。

$('#div1, #div2, #div3').hover(function() {
  //when hovering in, make the other divs smaller first    
  $('#div1, #div2, #div3').not(this).toggleClass("col-1-6",[1000]);
  $('#div1, #div2, #div3').not(this).toggleClass("col-1-3",[1000]);
  //then make this one bigger
  $(this).delay(2).toggleClass("col-2-3",[1000]);
  $(this).delay(2).toggleClass("col-1-3",[1000]);
 },
 function() {
  //when hovering out, make this div smaller first
  $(this).toggleClass("col-1-3",[1000]);
  $(this).toggleClass("col-2-3",[1000]);
  //then make the others bigger
  $('#div1, #div2, #div3').not(this).delay(2).toggleClass("col-1-3",[1000]);
  $('#div1, #div2, #div3').not(this).delay(2).toggleClass("col-1-6",[1000]);
 }
)

如果这两个div总是放在同一行上，那么您就不应该丢失换行的最右边的div。