单击时动画化图像功能，同时重叠其同级元素

animate out image on click function while overlapping its sibling elements

本文关键字：重叠 元素 功能 动画 图像 单击      更新时间：2023-09-26

第一次使用，需要帮助。

我有三个li li li元素，每个元素都有自己的<img>。我想在单击所选元素时，将单个<img>向外动画，同时重叠其他同级元素（在此扩展效果中，同级元素不应移动）。

我有的 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的位置设置为 fixed 确实有点接近我想要做的事情，它与其他兄弟姐妹重叠......但没有任何向外流动的平滑过渡。

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

我非常感谢这方面的任何帮助。

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

这里的jQuery代码切换.cardhover类，该类将元素移动到0的位置left（ul容器的开始），以防止任何溢出。它还为z-index增加了.cardactive，以确保元素在较大/较小的过渡期间位于其他元素之上。（它会在开始时从任何其他同级中删除该类。

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>

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

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

相关文章：