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.
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>
$("button").on("click", function() {
$(this).closest(".item-info")
.find("img")
.clone()
.addClass("zoom")
.appendTo("body");
if(!$('.zoom').get(0) )
setTimeout(function(){
$(".zoom").remove();
}, 2000);
});
Try it this way and tell if everythins is ok :)
Related
I have a tab and once I click it the tab fades in. The content gets loaded in with AJAX. After the animation is done I want to load in the content. Right now the content is loading in immediately when I click the button. I tried toggleClass with delay but it didn't work.
How can I delay the content from being loaded in?
This is the HTML :
$("#button-1").on("click", function() {
$(".hidden-content-1", 2000).toggleClass("show-hidden-content", 2000);
$(".main-page-content-1", 2000).toggleClass("hide-shown-content", 2000);
})
#modal-1 {
width: 33.33%;
height: 100vh;
background-color: green;
left: 0;
top: 0;
}
.modals {
transition-timing-function: ease-out;
transition-duration: 1000ms;
position: absolute;
}
.active {
width: 100vw !important;
height: 100vh !important;
}
.show-hidden-content {
display: block !important;
}
.hidden-content-1 {
display: none;
}
.hide-shown-content {
display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="modal-1" class="modals">
<div class="hidden-content-1">
<h1> TEST </h1>
</div>
<div class="main-page-content-1">
<h1>TEST </h1>
</div>
<a id="button-1" href="template-parts/panel1.php"><input onclick="change1()" type="button" value="See More" id="button-text-1"></input>
</a>
</div>
It seems you are looking something like:
$('#button-1').on('click', function () {
setTimeout(() => {
$('.hidden-content-1').toggleClass('show-hidden-content');
$('.main-page-content-1').toggleClass('hide-shown-content');
}, 2000);
});
You might want to use animation-delay
#target {
animation: fade-in 250ms ease-out 1s 1 normal both running;
}
#keyframes fade-in {
0% {
opacity:0;
} 100% {
opacity:1;
}
}
When my animation ends, my bottom_row element should disappear (as display: none is set at 100%), but it does not happen. Why?
.bottom_row {
opacity: 1;
animation: hide 5s linear 0s 1 normal forwards running;
}
#keyframes hide {
0% {
opacity: 1;
}
95% {
opacity: 0.05;
}
100% {
opacity: 0;
display: none;
color: red;
font-size: 48px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
<nav class="header_nav_container">
<div class="top_row">
TOP ROW CONTENT
</div>
<div class="bottom_row">
BOTTOM ROW CONTENT
</div>
<div class="third_row">
THIRD ROW CONTENT
</div>
</nav>
</header>
</body>
</html>
If I simply set display: none; right away, the cell is not present in the layout (which is what I want at the end of my anim):
.bottom_row {
opacity: 1;
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<header>
<nav class="header_nav_container">
<div class="top_row">
TOP ROW CONTENT
</div>
<div class="bottom_row">
BOTTOM ROW CONTENT
</div>
<div class="third_row">
THIRD ROW CONTENT
</div>
</nav>
</header>
</body>
</html>
How do I make an element disappear from the layout / grid without js? Is it possible and why it does not work with animations?
You can use height: 0;overflow:hidden; instead and you will get the same visual result:
.bottom_row {
opacity: 1;
animation: hide 5s linear forwards ;
}
#keyframes hide {
0% {
opacity: 1;
}
95% {
opacity: 0.05;
}
100% {
opacity: 0;
height: 0;
overflow:hidden;
color: red;
font-size: 48px;
}
}
<header>
<nav class="header_nav_container">
<div class="top_row">
TOP ROW CONTENT
</div>
<div class="bottom_row">
BOTTOM ROW CONTENT
</div>
<div class="third_row">
THIRD ROW CONTENT
</div>
</nav>
</header>
When one image changes into another each time it moves a bit bottom and right and comes back after the animation until to the next image change. It's simple slideshow. Here is the code:
<div>
<transition-group name='fade' tag='div'>
<div v-for="n in [currentN]" :key='n'>
<img :src="Image" />
</div>
</transition-group>
</div>
CSS
.fade-enter-active,
.fade-leave-active {
transition: all 0.8s ease;
overflow: hidden;
visibility: visible;
opacity: 1;
position: absolute;
width:100%
}
.fade-enter,
.fade-leave-to {
opacity: 0;
visibility: hidden;
width:100%
}
img {
height:600px;
width:100%
}
What is wrong and how can fix that image change animation issue and keep image full width of the screen and height 600px all the time without changing its position?
I found it in jsfiddle few days ago and tried to make changes on it.
Recommended Solution
Giving static number for the width of img will solve the problem. Change from 100% to your preferred width in px, like this:
img{
height:200px;
width:300px;
}
Alternate solution:
body{
margin:0px;
}
This prevents your image to flow off the grid and enable you to use 100% on the image tag as you did initially. Example: https://jsfiddle.net/L5y2hqua/
Code Snippet
new Vue({
el: 'image-slider',
data: {
images: ['http://i.imgur.com/vYdoAKu.jpg', 'http://i.imgur.com/PUD9HQL.jpg', 'http://i.imgur.com/Lfv18Sb.jpg', 'http://i.imgur.com/tmVJtna.jpg', 'http://i.imgur.com/ZfFAkWZ.jpg'],
currentNumber: 0,
timer: null
},
mounted: function () {
this.startRotation();
},
methods: {
startRotation: function() {
this.timer = setInterval(this.next, 3000);
},
next: function() {
this.currentNumber += 1
},
prev: function() {
this.currentNumber -= 1
}
},
computed: {
currentImage: function() {
return this.images[Math.abs(this.currentNumber) % this.images.length];
}
}
});
.fade-enter-active,
.fade-leave-active {
transition: all 0.8s ease;
overflow: hidden;
visibility: visible;
opacity: 1;
position: absolute;
width:100%;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
visibility: hidden;
width:100%;
}
img {
height:200px;
width:300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.6/vue.js"></script>
<body>
<div class="slider-wrapper">
<image-slider>
<transition-group name='fade' tag='div'>
<div
v-for="number in [currentNumber]"
:key='number'
>
<img
:src="currentImage"
/>
</div>
</transition-group>
</image-slider>
</div>
</body>
I want to load two elements of a page in different time.Here's my code:
<html>
<body >
<div style="background-image: url(im.jpg); height: 400px; width: 400px;">
<div class="test1">
test1
</div>
<div class="test2">
test2
</div>
</div>
</body>
</html>
Here,I want to load the page with background image and test1 text first,then after a moment I want to load the 2nd text test2.How can I specify this loading time?
http://jsfiddle.net/q2VJ4/
#keyframes dropHeader {
0% { opacity: 0; }
99% { opacity: 0; }
100% { opacity: 1; }
}
#-webkit-keyframes dropHeader {
0% { opacity: 0; }
99% { opacity: 0; }
100% { opacity: 1; }
}
.test2 {
-moz-animation-name: dropHeader;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 3s;
-webkit-animation-name: dropHeader;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 3s;
animation-name: dropHeader;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 3s;
}
Make the element hidden from start, then you can use a timer in Javascript to show it.
Add an id to the element so that you can easily find it from the script:
<div class="test2" id="test2">
In your <head> tag (which is missing in the page, it goes before the <body> tag) you can add a style that hides the element:
<style>
#test2 { display: none; }
</style>
Then you can add a script to the <head> tag that will show the element after for example two seconds:
<script>
window.onload = function(){
window.setTimeout(function(){
document.getElementById('test2').style.display = 'block';
}, 2000);
};
</script>
You can do this with jquery with the hide show option http://api.jquery.com/show/
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
With the element initially hidden, we can show it slowly:
$( "#clickme" ).click(function() {
$( "#book" ).show( "slow", function() {
// Animation complete.
});
});
This will work for you:
Loads the first element, then loads the second element.
http://jsfiddle.net/azRwq/2/
Using jQuery (make sure to include the script / src in your html)
Loads the first one after 2 second, and loads the second one after 4 seconds.:
$( "#test1" ).hide();
$( "#test2" ).hide();
setTimeout(function(){
$( "#test1" ).show();
}, 2000);
setTimeout(function(){
$( "#test2" ).show();
}, 4000);
HTML:
<div id="test1" style="background: red;">
<p>test1</p>
</div>
<div id="test2" style="background: blue;">
<p>test2</p>
</div>
Another option would be to remove remove:
$( "#test1" ).hide();
$( "#test2" ).hide();
and use display:none; in the css for each element
I'm trying to fill a glass of beer at 30% with html and CSS with the technique of this progress bar csstricks.
But I don't know if it's possible.
I have an image of the glass of beer with transparency content (png in illustrator).
Do you know if it's possible to have the progress bar in background ?
My tests were fruitless.:-(
Or do I have to use another technique ?
Thanks a lot for your help !
Nicolas
There you go :D (this is what you can do with a few alterations to the css-trick example):
Demo: http://jsfiddle.net/djnBD/
<html>
<head>
<meta charset="UTF-8">
<title>Fillable Beer Bottle</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(function() {
$(".liquid").each(function() {
$(this)
.data("origHeight", $(this).height())
.height(0)
.animate({
height: $(this).data("origHeight")
}, 1200);
});
});
</script>
<style>
.glass {
height: 200px;
position: relative;
background-image: url('http://i40.tinypic.com/11hyr1j.png'); /* Beer Glass */
background-repeat: no-repeat;
}
.liquid {
z-index:-1;
position:absolute;
bottom:0;
width: 200px;
background-image: url('http://i44.tinypic.com/f0vxbt.jpg'); /* Beer Liquid Pattern */
/* Remove the bottom two lines to stop animation */
-webkit-animation: move 150s linear infinite;
-moz-animation: move 150s linear infinite;
}
#-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 2212px 0px;
}
}
#-moz-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 2212px 0px;
}
}
</style>
</head>
<body>
<div class="glass">
<span class="liquid" style="height: 30%"></span>
</div>
</body>
</html>