0

デフォルトの幅が 33.33% の水平アコーディオン型の一連の div があります。Jquery を使用して、これらの div の 1 つを 60% にアニメーション化し、他の 2 つを 15% にアニメーション化するので、画面全体の幅を維持します。

ただし、div1 または div2 にカーソルを合わせると、div3 (3 行の右端の 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% を超えないようにすることだと思います。これは、ホバリングアウト時とホバリングイン時とで異なる順序を使用する必要があることを意味します。そのため、2 つ目の関数が適切であり、縮小する 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 を改行で失うことはありません。

于 2013-06-04T04:15:12.763 に答える
0

効果を達成するために、ジョーの答えに基づいて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 に答える