Question

首次使用并需要帮助。

我有三个li li li元素，每个元素都有自己的<img>。当单击所选元素时，我想在内部动画个别<img>，同时重叠其他兄弟元素（在此扩展效果中，兄弟姐妹不应该移动）。 p>

我有HTML标记：

<div class="wrapper">
   <ul>
     <li class="card">
        <div class="content">
          <img src="some-img.jpg">
        </div>
     </li>
     <li class="card">
        <div class="content">
          <img src="some-img.jpg">
        </div>
     </li>
     <li class="card">
        <div class="content">
          <img src="some-img.jpg">
        </div>
     </li>
   </ul>
</div>

CSS标记：

.card {
  position: relative;
  width: 28%;
  height: 100px;
  float: left;
  margin: 2.5%;
  overflow: hidden;
}


.content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: -50%;
  left: 0;
  transition: all 1s ease-in;
}

img {
  width: 100%;
}

JS：

$('.card').on('click','.content',function(){
  $(this).css({
     'position':'fixed',
     'z-index':'10'          
  });
});

我来回做了不同的代码迭代，但是将.content的位置设置为固定有点接近我正在尝试做的事情，它与其他兄弟姐妹重叠......但是没有任何平滑的过渡向外流动。

以下是codepen中代码的链接：http://codepen.io/broham89/pen/WrJmyB

我非常非常非常感谢您的任何帮助。

Answer 1

z-index和position不是技术上可动画的属性，所以无论什么解决方案都必须有点hacky。你可以通过摆弄CSS类和jQuery切换来实现这一目标。我稍微更改了代码，因此主要动画/转换发生在父li而不是.content元素上。为了使所有三个li保持在同一位置，我将它们更改为具有不同:nth-child定位声明的绝对定位元素，并为ul position {relative { {1}}。目前，它围绕三个元素设计，但如果您需要更多元素（或使用JS来确定数学），您可以使用这些值。

这里的jQuery代码切换.cardhover类，它将元素移动到left 0的位置 - ul容器的开头 - 以防止任何溢出。它还为.cardactive添加z-index，以确保在较大/较小的转换期间元素位于其他元素之上。（并且它在开始时将其从任何其他兄弟姐妹中删除。）

https://jsfiddle.net/nn454trm/11/

    $('.card').on('click', '.content', function() {
    
    $(this).parent().siblings().removeClass('cardactive'); 
$(this).parent().addClass('cardactive').toggleClass('cardhover');
      });

ul {
  position: relative;

}

.card {

  position: absolute;
  width: 28%;
  height: 100px;
  transition: 2s;
  margin: 2.5%;
  overflow: hidden;

}

.card:nth-child(1) {
  left: 0;
}

.card:nth-child(2) {
  left: 33.3%;
}

.card:nth-child(3) {
  left: 66.66%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  transition: all 1s ease-in;
}

img {
  width: 100%;
}


.cardhover {
  width: 95%;

  left: 0% !important;
}
.cardactive {
  z-index: 20;
 background: blue; //for demo purposes
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
  <ul>
    <li class="card">
      <div class="content">
        <img src="some-img.jpg" alt="" />
      </div>
    </li>
    <li class="card">
      <div class="content">
        <img src="some-img.jpg" alt="" />
      </div>
    </li>
    <li class="card">
      <div class="content">
        <img src="some-img.jpg" alt="" />
      </div>
    </li>
  </ul>
</div>

Answer 2

对于平滑过渡，您不想要animate而不是css吗？

http://api.jquery.com/animate/

在点击功能上制作动画，同时重叠其兄弟元素

2 个答案: