jQuery上下动画

Question

I'm building a webpage with a grid of images and when the user click on an image, a transparant layer slide up with an animation with some info about the image. This is working fine with the script that I have made below.

But I need to improve it because, when a user click on a second image, the prevoius transparant layer should slide back down and this is also working, but if the user click on the same layer, the animation will just slide up and then slide down. My question is if it's possible to improve my script to handle this.

My second question is that the script starts by slide down if any layer is already open, but does this affect all div tags or just the one that is opened? I guess there will be some performance issue if I have a big grid and the script slide down all layers despite that only one is visible!? Are my code OK or does it have any flaws that could be improved?

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

Here's a short example of what you want to achieve.

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

It first removes all the class .animate on every .box ,

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

and after that, it sets that class only on the clicked element.

The .animate class can be anything, as long as it only contains the changes to the normal state of the element.

The transition can be altered very easily. Transition comes in very handy:

The transition CSS property is a shorthand property for transition-property , transition-duration , transition-timing-function , and transition-delay . It enables you to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.

Read more about it at Mozilla Developer Network .

Update

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

This will work for clicking another time.

 $(".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>