0

我有一个水平手风琴式系列的 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/

4

2 回答 2

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 总是在同一行，你不应该丢失最右边的换行

于 2013-06-04T04:15:12.763 回答
0

我最终根据 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/

于 2013-06-05T01:20:04.713 回答