У меня есть блок внутри которого есть два изображения, которые должны меняться при клике и кликнув первая картинка должна пропадать, а вторая появляться, но вторая должна быть чуть ниже чем первая
Не могу понять как скрыть первую картинку и чтобы при повторном нажатии после появляения второй картинки дальше ничего не менялось, т.е. идет первый клик - изображение сменилось на второе, затем клик на второе ничего не менял
$(document).ready(function() {
$("#img_container").click(function() {
$("#img_container img.top").toggleClass("transparent");
});
});
#img_container {
position: relative;
height: 400px;
width: 400px;
margin: 0 auto;
cursor: pointer;
}
#img_container img {
position: absolute;
left: 0;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
width: 300px;
}
#img_container img.transparent {
opacity: 0;
}
#link_onclick {
cursor: pointer;
}
img.top {
margin-top: 100px;
}
.transparent {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="img_container">
<img src="https://png.pngtree.com/element_origin_min_pic/16/09/11/1457d4ffba1aded.jpg" />
<img class="top" src="https://img.freepik.com/free-photo/explosion-colored-powder-white-background_1112-1555.jpg?size=626&ext=jpg" />
</div>