基本横向手风琴的建议

时间:2013-06-13 22:55:28

标签: jquery jquery-plugins jquery-animate jquery-ui-accordion

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中的问题,请告诉我!我讨厌被一个可怕的浏览器这样的事情扼杀的想法......

1 个答案:

答案 0 :(得分: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%,它们的位置为:绝对,而不是动画宽度,只是位置是动画的。出于某种原因 - >带有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);
});