Question

我想用jQuery制作一些动画元素。我遇到的问题是两个元素都是绝对定位的，我不知道如何将它们组合起来。

我想同时为这两个元素设置动画。我想要 div.sister-property 动画，以便它的宽度稍微增加。我还希望 div.sister-img 中的绝对定位图像在 div.sister-property 宽度增加时向右移动。我该怎么做呢？感谢。

当您将鼠标悬停在水平条上方时，可以看到水平条略微动画。它只是被没有移动的徽标所掩盖。

jQuery的：

$("div.sister-img").hover(function(){
    $(this).stop(true, false).animate({ width: "50px"});
    $('div.sister-img img').stop(true, false).animate({marginLeft: "50px;"});
}, function() {
    $(this).stop(true, false).animate({ width: "150px"});
    $('div.sister-img img').stop(true, false).animate({marginLeft: "150px;"});
});

HTML：

<div class="sister-properties">                         
   <a href="#">
    <div class="sister-img">
        <div class="sister-property"></div>
            <img src="/_images/layout/thief-river-sister-logo.png" alt="Thief River Seven Clans Casinos logo" />
    </div>
   </a>

<div class="clear"></div>

<a href="#">
    <div class="sister-img">
    <div class="sister-property" style="background: #B8072E;"></div>
         <img src="/_images/layout/red-lake-sister-logo.png" alt="Red Lake Seven Clans Casinos logo" />
    </div>
</a>

</div>

CSS（SASS）：

div.sister-properties{
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  div.sister-img{
      height: 40px;
      width: 100%;
      float: right;
      position: relative;
      div.sister-property{
        width: 90%;
        height: 75%;
        position: absolute;
        left: 0;
        top: 10%;
        background-color: $thief-river-falls-brand-color;
        z-index:9998;
      }
      img{
        position: absolute;
        right: 0;
        z-index: 9999;
      }
  }
}

JS小提琴：http://jsfiddle.net/ykVc5/

jQuery - 使用绝对定位的元素动画化多个元素

0 个答案: