jQuery анимировать вверх и вниз

Question

Я строю веб-страницу с сеткой изображений, и когда пользователь нажимает на изображение, прозрачный слой скользит вверх с анимацией с некоторой информацией об изображении. Это отлично работает со сценарием, который я сделал ниже.

Но мне нужно улучшить его, потому что, когда пользователь нажимает на второе изображение, слой прозрачности prevoius должен скользить назад, и это также работает, но если пользователь нажмет на один слой, анимация просто сдвинется а затем сдвиньте вниз. Мой вопрос в том, можно ли улучшить мой скрипт, чтобы справиться с этим.

Мой второй вопрос заключается в том, что скрипт начинается с слайда вниз, если какой-либо слой уже открыт, но влияет ли это на теги 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 может быть любым, при условии, что он содержит только изменения в состоянии нормального состояния.

Переход можно очень легко изменить. Переход происходит в очень удобной:

transition CSS свойство свойство является обобщающим для transition-property, transition-duration, transition-timing-function, и transition-delay. Позволяет определить переход между двумя состояниями элемента. Различные состояния могут быть определены , используя псевдоклассы типа :hover или :active или динамически устанавливаются с использованием JavaScript.

Узнайте больше об этом на странице Mozilla Developer Network.

Update

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>