3

所以，

我一直在制作一个带有三个面板的动画水平手风琴，在尝试了多个插件之后，我求助于使用 .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) Accordion 面板必须能够隐藏溢出（具体来说，就像在 jsfiddle 中一样，从每个面板上的 SVG 图像溢出）。

另一方面，如果有人确实看到 IE 中的问题，请告诉我！我讨厌被一个糟糕的浏览器这样挫败的想法......

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 回答