1

以前の私の前の質問に関して; Jqueryスライドアニメーション。スライダーを使用するために、次のソリューションを使用しました。

HTML

<div class="bigBox">
     <div class="try2">
          <h3 id="test2">CLICK THIS</h3>
          <p>This is a demonstration of jQuery SimpleDialog.</p>
      </div> 
      <div class="try">
          <p id="haha">CLICK THIS</p>
          <p>This is a demonstration of jQuery SimpleDialog.</p>
      </div>          
</div>

JS

$('#haha').click(function() {
    $('.try').hide("slide", {
        direction: "left"
    }, 1000);
    $('.try2').show("slide", {
        direction: "right"
    }, 1000);
});​

CSS

div.bigBox {
  background-color:transparent;
  width:100px;
  height:125px;
  position: relative;
}

.try, .try2{
  width:100px;
  height:125px;
  position: absolute;
}

.try {
  background-color:green; 
}

.try2{
  background-color:yellow;
} ​

デモ

問題は、グーグルクロームでページを最小化/最大化（ズームは100％ではない）すると、スライダーがスムーズにスライドしなくなることです。しかし、Firefox / IEでテストすると、うまく機能します。

グーグルクロームのスライダー間のスペースの原因は何ですか？これはグーグルクロームのバグですか？どうすれば修正できますか？ありがとうございました。

4

1 に答える 1

3

確かに、なぜこれがクロムで行われているのかはわかりませんが、少しズームインしたときに機能するわずかに異なるアプローチがあります。

http://jsfiddle.net/CV7fd/20/

基本的な概念は、2つの子要素「try」と「try2」を別のdivでラップすることです（これを「overflowDiv」と呼びます）。次に、「bigBox」divのサイズを100pxに制限し、CSSオーバーフロープロパティを「hidden」に設定します。「overflowDiv」は、「try」と「try2」の幅と同じ幅になり、折り返されないようになっています（200px-この計算には、パディング、境界線、幅、マージンを含めることを忘れないでください）。「bigBox」は、事実上「overflowDiv」のコンテンツへのウィンドウになります。次に、アニメーションは「overflowDiv」の左位置を簡単に調整します。

その結果、2つではなく1つの要素のみをアニメーション化することになり、したがって、それらは互いに隣接して表示される可能性が高くなります。

于 2012-05-14T13:14:31.163 に答える