3

それで、

私は 3 つのパネルでアニメーション化された水平アコーディオンに取り組んでおり、複数のプラグインを試した後、.animate を使用して独自の jquery アコーディオンを作成することにしました。

Chrome または FF でフィドルを表示している場合は正常に動作するはずですが、IE では奇妙なジッタが発生します。何度も微調整してみましたがわかりません。

おそらく別の水平アコーディオン プラグインを探して、製図板に戻ることを検討しています。何らかの理由で、水平アコーディオンは jquery プラグインの世界のユニコーンのようです。プラグインにはいくつかの特定の要件があります。

1）jqueryを使用してウィンドウの高さを満たすためにアコーディオンの高さを設定できるようにする必要があります（私はすでにそれを行うためのjqueryを持っています。フィドルまたは以下で見ることができます）

var remaining_height = parseInt($(window).height()); 
$('.main').height(remaining_height);

2) アコーディオン パネルは、オーバーフロー (具体的には、jsfiddle のように各パネルの SVG 画像からのオーバーフロー) を非表示にできる必要があります。

一方で、誰かが IE の問題を発見した場合は、私に知らせてください! 1 つのひどいブラウザによって、このように後退するという考えは嫌いです...

4

1 に答える 1

1

私は少し異なる設定をしました：

http://jsfiddle.net/Sjnv8/38/

#parent {
  width: 100%;
  background-color: gray;
  height: 100%;
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

#panel1 {
  background-color: yellow;
  width: 100%;
  padding: 0;
  margin: 0;
  position:absolute;
  z-index:1;
}

#panel2 {
  background-color: orange;
  position:absolute;
  z-index:2;
  width: 100%;
  left: 33.34%;
   padding: 0;
  margin: 0;
}

#panel3 {
  background-color: green;
  width: 100%;
  left: 66.66%;
  padding: 0;
  margin: 0;
  z-index:3;
}

#panel3img {
/*border-left: 1px solid #333333;
width: auto;
position: relative;
left: -35%;*/
}

.hov {
  /****keeps wide divs from flowing down to next line****/
  position: absolute;
  /****hides overflowing content****/
  overflow: hidden;
}

/*.abs {
    position: relative;
    top: 0;
}*/

すべての要素の幅は width:100% に設定され、position:absolute があり、幅をアニメーション化する代わりに、位置だけがアニメーション化されます。何らかの理由で -> SVG 画像を使用した幅のアニメーションが IE で問題でした。誰かが説明してくれることを願っています、私も興味があります。:)

jquery:

var remaining_height = parseInt($(window).height()); 
$('.main').height(remaining_height);

$('#panel1').hover(function() {
  $('#panel2').stop(true, false, false).animate({ left: "66.66%"}, 350),
    $('#panel3').stop(true, false, false).animate({ left: "83.33%"}, 350);
   // $(this).stop(true, false, false).animate({width:'66.66%'}, 350)
}, function() {
 // $(this).stop(true, false, false).animate({width:'33.33%'}, 350),
    $('#panel2').stop(true, false, false).animate({ left: "33.33%"}, 350),
      $('#panel3').stop(true, false, false).animate({ left: "66.66%"}, 350);

});

$('#panel2').hover(function() {
 // $('#panel1').stop(true, false, false).animate({width:'16.666%'}, 350),
    $('#panel3').stop(true, false, false).animate({ left: "83.33%"}, 350),
      $(this).stop(true, false, false).animate({left: "16.666%"}, 350);
}, function() {
  $(this).stop(true, false, false).animate({left: "33.33%"}, 350),
   // $('#panel1').stop(true, false, false).animate({width:'33.33%'}, 350),
      $('#panel3').stop(true, false, false).animate({left: "66.66%"}, 350);
});

$('#panel3').hover(function() {
 // $('#panel1').stop(true, false, false).animate({width:'16.666%'}, 350),
    $('#panel2').stop(true, false, false).animate({ left: "16.666%"}, 350),
      $(this).stop(true, false, false).animate({left: "33.33%"}, 350);
}, function() {
  $(this).stop(true, false, false).animate({left: "66.66%"}, 350),
   // $('#panel1').stop(true, false, false).animate({width:'33.33%'}, 350),
      $('#panel2').stop(true, false, false).animate({left: "33.33%"}, 350);
});
于 2013-06-14T01:57:01.693 に答える