Question

基本上我所拥有的是4个div，每个都以设定的高度开始，当你将它们鼠标悬停时，它们会动画以使div更高，从而完整地显示背景图像而不仅仅是图像的潜行峰值，如图所示本来。你可以看一下我在这里得到的东西：

http://jsfiddle.net/u2DK7/

基本上我想要它做的是当你将鼠标悬停在其中一个方框上时，它会扩展内容而不是将其推下来。我已经尝试过短暂的绝对定位，但它似乎并不是我需要的。

我想知道的另一件事是，是否有任何方法只需使动画指令工作一次。虽然你来回徘徊，然后看着你排队的动画的手风琴风格效果非常酷，但这并不是我想要它的工作方式！

顺便说一下，我需要在html代码中保存样式标签，这样我就可以更改背景图片，而无需设置4个单独的div！

提前致谢！

Answer 1

我选择绝对定位元素，并根据他们之前的兄弟来计算他们需要从左边开始的距离。

working jsFiddle here

jQuery

$.each($('.fourboxes'), function(i,v){
  if(i == 0){
   $(v).css('left', '10px');
  }else{
    var prevDiv = $(this).prev('.fourboxes');
    var pWidth = prevDiv.width();
    var pleft = prevDiv.position().left;
    $(v).css({'left' : pWidth + pleft + 10 +"px"});
  }        
});

CSS

.fourboxes {
    position:absolute;
        left:10px;
    height: 200px;
    width: 139px;
    border:1px solid red;
    background-color:blue !important;

}

jQuery Animating divs显示完整图像，重叠内容而不是向下移动内容

1 个答案: