Question

我正在构建一个带有图像网格的网页，当用户点击图像时，透明图层会向上滑动，并带有一些动画，其中包含有关图像的一些信息。这与我在下面制作的脚本一起工作正常。

但我需要对其进行改进，因为当用户点击第二张图片时，prevoius transparant图层应向下滑动，这也有效，但如果用户点击同一图层，动画就会向上滑动然后向下滑动我的问题是，是否有可能改进我的脚本来处理这个问题。

我的第二个问题是，如果任何图层已经打开，脚本会从下滑开始，但是这会影响所有div标签还是只影响打开的标签？我想如果我有一个大网格并且脚本向下滑动所有层，尽管只有一个可见，会有一些性能问题！？我的代码是好还是有任何可以改进的缺陷？

JQuery的：

$(document).ready(function(){
$(".outer").click(function(){ 
    $(".inner").animate({height:'-=100%'},250);
    $(this).children(".inner").animate({height:'+=100%'},250);
});
});

HTML：

<div class='outer'>
<img src="image-1.png" class="click">
<div class='inner'><h1>Cover 1</h1></div>
</div>
<div class='outer'>
<img src="image-2.png" class="click">
<div class='inner'><h1>Cover 2</h1></div>
</div>
<div class='outer'>
<img src="image-3.png" class="click">
<div class='inner'><h1>Cover 3</h1></div>
</div>

CSS：

.outer {
height: auto;
background: yellow;
position:relative;
width: 300px;
}

.outer img {
display: block;
}

.inner {
position: absolute;
bottom: 0;
height:0;
width: 100%;
background:rgba(0, 0, 0, 0.5);
}

Answer 1

这是您想要实现的一个简短示例。

$(".box").removeClass('animate');

首先删除每个.animate上的所有课程.box，

$(this).addClass('animate');

之后，它仅在单击的元素上设置该类。

.animate类可以是任何类，只要它只包含对元素 normal 状态的更改。

转换可以很容易地改变。过渡非常方便：

transition CSS属性是for的简写属性 transition-property，transition-duration，transition-timing-function，和transition-delay。 它使您可以定义过渡在一个元素的两个状态之间。可以定义不同的状态使用:hover或:active等伪类或使用动态设置的JavaScript。

在Mozilla Developer Network了解详情。

<强>更新

    if ($(this).hasClass('animate')) {
        $(".box").removeClass('animate');
      } else {
        $(".box").removeClass('animate');
        $(this).addClass('animate');
      }

这适用于点击其他时间。

$(".box").click(function(e) {
  e.preventDefault;
  if ($(this).hasClass('animate')) {
    $(".box").removeClass('animate');
  } else {
    $(".box").removeClass('animate');
    $(this).addClass('animate');
  }
});

.box {
  background: red;
  width: 100px;
  height: 100px;
  margin: 10px;
  top: 0;
  transition: margin-left .5s ease-in-out;
}
.animate {
  margin-left: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

jQuery上下动画

1 个答案: