Issue
I have a button that when I click it, it makes an animation for an image to move up.
Every-time I click the button, it should add another image that moves up.
The problem is: If I have tapped the button more than one time, the first one completes, but all the other images just disappears before reaching the point.
css
.zoom{
position: fixed;
top: 50%;
right: 1%;
width: 5%;
height: 5%;
opacity: 0;
animation: zoom 2s ease forwards;
z-index: 2;
}
@keyframes zoom{
0%{opacity: 0}
50%{opacity: 1}
100%{opacity: 0; top: 1%;}
}
html
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
</head>
<body>
<div class="col-lg-4 item-info">
<div class="card" style="background-color: #05008F">
<img class="thumbnail" src="image.png" width="640" height="360">
</div>
<div class="box-element">
<button>Image Up</button>
</div>
</div>
<script type="text/javascript">
$("button").on("click", function() {
$(this).closest(".item-info")
.find("img")
.clone()
.addClass("zoom")
.appendTo("body");
setTimeout(function(){
$(".zoom").remove();
}, 2000);
});
</script>
</body>
The animation comes from this tutorial
clicking the button more than 1 time, should show more than 1 image going up.
The problem is:
When I click many times during the 2 seconds, the images are displayed, but when the 2 seconds are gone from the first click, all of the images disappear.
Solution
The problem is that on the timeout all the .zoom images are removed.
This snippet 'remembers' which img is to be removed on each timeout.
It is important in a practical situation that these images are removed when no longer needed else you could eventually run out of store.
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<style>
.zoom {
position: fixed;
top: 50%;
right: 1%;
width: 5%;
height: 5%;
opacity: 0;
animation: zoom 2s ease forwards;
z-index: 2;
}
@keyframes zoom {
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0;
top: 1%;
}
}
</style>
</head>
<body>
<div class="col-lg-4 item-info">
<div class="card" style="background-color: #05008F">
<img class="thumbnail" src="https://picsum.photos/id/1084/640/360?grayscale" width="640" height="360">
</div>
<div class="box-element">
<button>Image Up</button>
</div>
</div>
<script type="text/javascript">
$("button").on("click", function() {
const thisImg = $(this).closest(".item-info")
.find("img")
.clone();
thisImg.addClass("zoom")
.appendTo("body");
setTimeout(function() {
thisImg.remove();
}, 2000);
});
</script>
</body>Answered By - A Haworth
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.