Question

我有一个水平手风琴式系列的div，默认宽度为33.33％。我正在使用Jquery将其中一个div设置为60％，另外两个设置为15％，因此我保留了全屏宽度。

但是，将鼠标悬停在div1或div2上会导致div3（三行中最右边的div）暂时闪烁或消失（我猜想直到Jquery将其动画降低到不会将其降低到下一个的宽度在网格中排。）

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

我的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

我认为您需要的是订购类的添加和删除，以便div的宽度总和不会超过100％。这意味着你需要在悬停时使用不同的顺序，而不是悬停时，所以第二个功能是有序的，并确保一个微小的延迟，以确保在萎缩的人腾出空间之前，不断扩大的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总是在同一条线上，那么你应该永远不会丢失最右边的一行来换行

Answer 2

我最终使用基于Joe的答案的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/

防止手风琴DIV消失

2 个答案: