Question

SO，

我一直在制作一个带有三个面板的动画水平手风琴，在尝试了多个插件之后，我使用.animate编写了我自己的jquery手风琴，可以在这里找到：http://jsfiddle.net/Sjnv8/33/

如果您正在查看Chrome或FF中的小提琴，它应该可以正常工作，但我在IE中遇到了一些奇怪的抖动。我尝试了多次调整，但无法弄明白。

我正在考虑回到绘图板，也许正在寻找另一个水平手风琴插件，我想知道是否有人有任何建议。出于某种原因，水平手风琴似乎是jquery插件世界的独角兽。我对插件有一些特定的要求：

1）我需要能够设置手风琴的高度以使用jquery填充窗口高度（我已经有了jquery来做到这一点，你可以在小提琴或下面看到它）

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

2）折叠式面板必须能够隐藏溢出（特别是，每个面板上的SVG图像溢出，如同jsfiddle）。

另一方面，如果有人确实看到了IE中的问题，请告诉我！我讨厌被一个可怕的浏览器这样的事情扼杀的想法......

Answer 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;
}*/

所有元素宽度都设置为宽度：100％，它们的位置为：绝对，而不是动画宽度，只是位置是动画的。出于某种原因 - ＆gt;带有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);
});

基本横向手风琴的建议

1 个答案: