How to create a zoom effect with function call in jquery - javascript

i have code in which when user clicks a link named zoom the an alert with a zoom effect is shown to user..
I want the same to happen when i click a button ...
when i try it to button click its not working.
How to achieve this?How to correct the code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css'>
<style>
html,
body {
margin: 0;
padding: 10px;
-webkit-backface-visibility: hidden;
}
/* text-based popup styling */
.white-popup {
position: relative;
background: #FFF;
padding: 25px;
width: auto;
max-width: 400px;
margin: 0 auto;
}
/*
====== Zoom effect ======
*/
.mfp-zoom-in {
/* start state */
/* animate in */
/* animate out */
}
.mfp-zoom-in .mfp-with-anim {
opacity: 0;
transition: all 0.2s ease-in-out;
transform: scale(0.8);
}
.mfp-zoom-in.mfp-bg {
opacity: 0;
transition: all 0.3s ease-out;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
opacity: 1;
transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
transform: scale(0.8);
opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}
</style>
</head>
<body>
<div class="links">
<div class id="inline-popups">
Zoom
<button onClick="#test-popup" data-effect="mfp-zoom-in">test</button>
</div>
</div>
<!-- Popup itself -->
<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">Game completed sucessfull</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>

Try the below
var theControl = $("#test-popup");
$('#clickMe').magnificPopup({
items: {
src: theControl,
},
type: 'inline',
mainClass: 'mfp-with-zoom', // this class is for CSS animation below
zoom: {
enabled: true, // By default it's false, so don't forget to enable it
duration: 300, // duration of the effect, in milliseconds
easing: 'ease-in-out', // CSS transition easing function
// The "opener" function should return the element from which popup will be zoomed in
// and to which popup will be scaled down
// By defailt it looks for an image tag:
}
});
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css'>
<style>
html,
body {
margin: 0;
padding: 10px;
-webkit-backface-visibility: hidden;
}
/* text-based popup styling */
.white-popup {
position: relative;
background: #FFF;
padding: 25px;
width: auto;
max-width: 400px;
margin: 0 auto;
}
/*
====== Zoom effect ======
*/
.mfp-zoom-in {
/* start state */
/* animate in */
/* animate out */
}
.mfp-zoom-in .mfp-with-anim {
opacity: 0;
transition: all 0.2s ease-in-out;
transform: scale(0.8);
}
.mfp-zoom-in.mfp-bg {
opacity: 0;
transition: all 0.3s ease-out;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
opacity: 1;
transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
transform: scale(0.8);
opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<button id="clickMe" data-effect="mfp-zoom-in">test</button>
<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">Game completed sucessfully</div>

You need to create a function that the onclick attribute will trigger. In that function, you can do the zoom logic that you prefer.
<button onclick="zoomLogic" data-effect="mfp-zoom-in">test</button>
Inside your script tag or in your script:
function zoomLogic() {
//Grab the element you wish the zoom effect to take place and do your logic
}

Related

CSS transition not working when adding class via jquery

I am adding a class to show an image when the mouse is over a div, but the transition isnt working at all.
I am using opacity, I know that the visibily: hidden is not animable.
The code is in the snippet:
$(document).ready(function() {
$("#trigger").on("mouseenter", function () {
$("#imgPuffo").addClass("visible");
$("#trigger").on("mouseout", function () {
$("#imgPuffo").removeClass("visible");
});
});
});
#trigger {
height: 100px;
width: 100px;
background: red;
}
img {
opacity: 0;
animation: opacity 2s;
}
.visible {
visibility: visible;
opacity: 1;
animation: opacity 2s;
}
.imgPuffo {
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trigger"></div>
<img id="imgPuffo" class="imgPuffo" src="https://www.pinclipart.com/picdir/big/449-4499911_how-to-draw-papa-smurf-from-the-smurfs.png" alt="">
There's a bit of confusion as animation is being used, but animation will look for an #keyframes sequence to tell it what animation to run. In fact it looks as though we don't need a full CSS animation in this case, just a CSS transition.
I've added transition: all 2s in case you want to transition anything else in future, like the scale, but if you just want to stick with transitioning opacity you could do transition: opacity 2s instead.
$(document).ready(function() {
$("#trigger").on("mouseenter", function () {
$("#imgPuffo").addClass("visible");
$("#trigger").on("mouseout", function () {
$("#imgPuffo").removeClass("visible");
});
});
});
#trigger {
height: 100px;
width: 100px;
background: red;
}
img {
opacity: 0;
/* animation: opacity 2s; */
transition: all 2s;
}
.visible {
visibility: visible;
opacity: 1;
/* animation: opacity 2s; */
}
.imgPuffo {
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trigger"></div>
<img id="imgPuffo" class="imgPuffo" src="https://www.pinclipart.com/picdir/big/449-4499911_how-to-draw-papa-smurf-from-the-smurfs.png" alt="">
if you want to use animations check the docs. You need to use #keyframes
$(document).ready(function() {
$("#trigger").on("mouseenter", function () {
$("#imgPuffo").addClass("visible");
$("#trigger").on("mouseout", function () {
$("#imgPuffo").removeClass("visible");
});
});
});
#trigger {
height: 100px;
width: 100px;
background: red;
}
img {
opacity: 0;
animation: opacity 2s;
}
.visible {
visibility: visible;
opacity: 1;
transition: opacity 2s ease-in-out;
}
.imgPuffo {
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trigger"></div>
<img id="imgPuffo" class="imgPuffo" src="https://www.pinclipart.com/picdir/big/449-4499911_how-to-draw-papa-smurf-from-the-smurfs.png" alt="">
How about a solution for css using a :hover, without jquery?
#trigger {
height: 100px;
width: 100px;
background: red;
}
#trigger:hover + .imgPuffo {
opacity: 1;
}
.imgPuffo {
opacity: 0;
height: 200px;
transition: opacity 2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trigger"></div>
<img id="imgPuffo" class="imgPuffo" src="https://www.pinclipart.com/picdir/big/449-4499911_how-to-draw-papa-smurf-from-the-smurfs.png" alt="">

Fading in a background image using javascript or css on hover

So far, i've been able to make it such that when the cursor hovers over the div a background image in the body appears. I need to add a fade in animation to this. Ive been looking for solutions here but havent been able to work around it. I don't have any experience in javascript.
enter code here
<script>
changeBgImage = () => {
document.body.style.backgroundImage = "url('../Images/Background/wraithback.jpg')";
console.log("working")
}
ogBgImage = () => {
document.body.style.backgroundImage = "url('../Images/Background/black.jpg')";
console.log("working")
}
</script>
<style>
body {
background-image: url('../Images/Background/black.jpg');
}
</style>
<body>
<div class="gwraith"><a href="../Legends/wraith.html ">
<img src="../Images/Legends_pics/wraithchibi.png" width="130vw" class="wraith"
onmouseover="changeBgImage();" onmouseout="ogBgImage();">
</a>
</body>
Add a transition rule to the body tag. The same can be done in css, without javascript.
function changeBgImage() {
document.body.style.backgroundImage = "url('https://s1.1zoom.ru/big0/284/Summer_Pond_Fence_Trees_496376.jpg')";
}
function ogBgImage() {
document.body.style.backgroundImage = "url('https://pristor.ru/wp-content/uploads/2017/02/leto12.jpg')";
}
body {
background-image: url('https://pristor.ru/wp-content/uploads/2017/02/leto12.jpg');
background-repeat: no-repeat;
background-size: cover;
transition: all 0.7s linear;
}
<body>
<div class="gwraith">
<a href="../Legends/wraith.html">
<img src="https://begin-english.ru/img/word/refresh.jpg" width="130vw" class="wraith"
onmouseover="changeBgImage();" onmouseout="ogBgImage();">
</a>
</div>
</body>
I didn't manage to do it with body. But you can stretch the underlying div and change its opacity.
const appDiv = document.getElementById("app");
appDiv.addEventListener("mouseover", showBodyBackground);
appDiv.addEventListener("mouseout", hideBodyBackground);
function showBodyBackground() {
document.getElementById("bg").classList.add("hidden");
}
function hideBodyBackground() {
document.getElementById("bg").classList.remove("hidden");
}
.visible {
background: url('https://www.bouwendnederland.nl/media/6502/rijnhaven-impressie-602-x-402.jpg');
transition: opacity 1.5s linear;
opacity: 1;
}
.hidden {
opacity: 0;
}
.stretched {
position: absolute;
width: 100%;
height: 100%;
}
#app {
width: 100px;
height:50px;
background: lightblue;
text-align: center;
margin: 0 auto;
position: relative;
}
<body>
<div class="stretched visible" id="bg"></div>
<div id="app">Hover me!</div>
</body>
Be aware, that everything will disappear in the element with opacity: 0. It means, your button and other elements you want to keep on the screen shouldn't be children of that div.
We can't just fade body, or indeed any wrapper div which may replace it, as that would fade everything. We also can't directly fade a background image as CSS doesn't have that ability. But we can put the two background images into the two pseudo elements, before and after, of body and these can then be animated to fade in and out. The code wants to fade in one background on mouseover, and fade it out on mouseout.
There are two background images used, one called black. The code here fades that out as the other image fades in, but that can be easily removed if required.
Mouse over the gear image to fade in the second image, and mouseout of the gear to fade it out.
<!DOCTYPE html>
<html>
<head>
<script>
changeBgImage = () => {
<!--document.body.style.backgroundImage = "url('../Images/Background/wraithback.jpg')";-->
document.body.classList.toggle('showbefore');
document.body.classList.toggle('showafter');
console.log("working")
}
ogBgImage = () => {
<!--document.body.style.backgroundImage = "url('christmas card 2020 front.jpg')";-->
document.body.classList.toggle('showbefore');
document.body.classList.toggle('showafter');
console.log("working")
}
</script>
<style>
body {
position: relative;
height: 100vh; /* I added this just to cover the whole window you may not want it */
}
body:before, body:after {
opacity: 0;
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
background-size:cover; /* I added this just to get the background over the whole window - you may or may not want it */
background-repeat: no-repeat no-repeat;
background-position: center center;
animation-duration: 2s; /* change to what you want it to be */
animation-fill-mode: forwards;
}
body:before {
background-image: linear-gradient(black, black); /*change this to url('your background image');*/
animation-name: shown;
}
body:after {
background-image: url('https://ahweb.org.uk/christmas card 2020 front.jpg');
animation-name: unshown;
}
body.showbefore:before, body.showafter:after {
animation-name: show;
}
body.showafter:before, body.showbefore:after {
animation-name: unshow;
}
#keyframes unshown {
from {
opacity: 0;
}
to {
opacity: 0;
}
}
#keyframes shown {
from {
opacity: 1;
}
to {
opacity: 1;
}
}
#keyframes unshow {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body class="showbefore">
<div class="gwraith"><!--<a href="../Legends/wraith.html ">-->
<!--<img src="../Images/Legends_pics/wraithchibi.png" width="130vw" class="wraith"
onmouseover="changeBgImage();" onmouseout="ogBgImage();">-->
<img src="https://ahweb.org.uk/gear.jpg" width="130vw" class="wraith"
onmouseover="event.preventDefault();event.stopPropagation();changeBgImage();" onmouseout="event.preventDefault();event.stopPropagation();ogBgImage();">
<!--</a>-->
</body>
</body>
</html>

How do i make the image appear at the same time as the next and to be on the rightt

The loading screen is loading to high up it needs to be under the menu section of the page to make it look more realistic, and how do I make the image appear at the same time as the text cause the image after the loading always comes up first
HTML
<!DOCTYPE HTML>
<HTML lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/CSS" href="dropdownmenu.css">
<link rel="stylesheet" type="text/CSS" href="rainbowheading.css">
<link rel="stylesheet" type="text/CSS" href="loadingcss.css">
<script src="loading.js"></script>
<title> North Macedonia </title>
<div class="container">
<h1 class="rainbow"> The pearl of the Balkans: Macedonia </h1>
<div class="navbar">
Home
Macedonian Dispora
Cities
<div class="dropdown">
<button class="dropbtn">History
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Ancient History
Ottoman Period
Yugoslav Period
Modern History
</div>
</div>
</div>
</head>
<body onload="myFunction()" style="margin:0;">
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Welcome to my website about Macedonia</h2>
<p>x</p>
</div>
<div style="display:none;" id="MyDi" class="animate-bottom">
<img src="./images/ohridindex.jpg" class="center">
</body>
CSS (For loading) This is the main CSS document
/* Center the loader */
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
text-align: center;
}
#myDi {
display: Float;
text-align: center;
}
Javascript:
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
document.getElementById("myDi").style.display = "block";
}
There are a number of approaches you can take. The current code says explicitly: "put #loader 200px below the top of the document" because of the top and position css properties. You could increase the top number to move it further down.
If you wanted to guarantee the loader is below the menu bar, even if the menu bar changes size, you could put it inside a relatively positioned div and remove the top property, which will make it display above the other content, but positioned relatively to the wrapper element (read more about positioning).
<!-- the navbar goes here -->
<div id="loader-wrapper">
<div id="loader" />
<div>
#loader-wrapper {
position: relative;
}
Another note about your code - make sure all your visible content is wrapped in your <body>. Right now your navbar is inside the <head>, which isn't valid.
#loader {
position: absolute;
left: 50%;
top: 200px;
transform: translate(-50%, 0);
}
Loader icon is loading in center of screen.
I see the HTML code. But The div in header should be placed in body tag.

how to change image when ball put into box?

I am trying to do some animation using css or jquery .my ball is put into box when I run my project .I want to change the image if ball is successfully insterted in box.
here is my code
https://jsbin.com/coyarezeto/1/edit?html,css,output
.container {
margin: 10px;
}
.circle0 {
border-radius: 50%;
height: 30px;
width: 30px;
margin: 10px;
background: PaleTurquoise;
position :relative;
-webkit-animation: mymove 5s; /* Safari 4.0 - 8.0 */
animation: mymove 5s;
animation-timing-function: ease-in-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
}
.newImage{
display:none;
position :absolute;
top:250px
}
#-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px; opacity: 0}
}
/* Standard syntax */
#keyframes mymove {
/* from {top: 0px;}
to {top: 250px;opacity: 0.2} */
0% {
top: 0px;
}
50% {
top: 100px;
}
100% {
top: 250px;
opacity: .3;
display:none
}
}
.img{
position :absolute;
top:250px
}
I want to change image when ball inserted into box after 5sec
<img class="newImage" width="100" src="https://previews.123rf.com/images/boygointer/boygointer1511/boygointer151100234/49187556-open-gift-box-over-white-background-3d-illustration.jpg"
I don't think this is something CSS can do, but it is something jquery can do witht he following code :
function imgChange(){
setTimeout(function(){ $('.img').attr({'src' : 'insertnewimg'}); }, 5000);
}
function ballTouch(){
//yadda yadda code that makes the ball move and detects when its ina box
if(ballIsInTheBox == true)
imgChange();
}
ballTouch();
setTimeout makes the program wait x, in this case 5000, miliseconds (1000 miliseconds = 1 second) before executing the code inside of it, which changes the image src in jQuery. Good luck, let me know if I screwed anything up. Note : Keep in mind setTimeout doesnt stop the whole program, just delays the function inside of it.
You can use setTimeout and display image after 5 secs. i.e :
//display image after 5 seconds
setTimeout(function() {
document.getElementById('myimage').style.display = 'block';
}, 5000);
.container {
margin: 10px;
}
.circle0 {
border-radius: 50%;
height: 30px;
width: 30px;
margin: 10px;
background: PaleTurquoise;
position: relative;
-webkit-animation: mymove 5s;
/* Safari 4.0 - 8.0 */
animation: mymove 5s;
animation-timing-function: ease-in-out;
/* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
}
.newImage {
display: none;
position: absolute;
top: 250px
}
#-webkit-keyframes mymove {
from {
top: 0px;
}
to {
top: 200px;
opacity: 0
}
}
/* Standard syntax */
#keyframes mymove {
/* from {top: 0px;}
to {top: 250px;opacity: 0.2} */
0% {
top: 0px;
}
50% {
top: 100px;
}
100% {
top: 250px;
opacity: .3;
display: none
}
}
.img {
position: absolute;
top: 250px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<!-- <div class="container">
-->
<div class="circle0"></div>
<!-- </div>
-->
<img class="img" width="100" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxATDxUSEBAWFhUVFhcVFRIXEBcQEhcVFhEXFxUSFxUYHyggGBolGxMVITEhJSktLi4uFx8zODMtNygtLisBCgoKDg0OGhAQGy4mHR0tLi0tKy0tLystLS0tKy4rLTAtLTAtLS8rLS0tKy0tLS0tLy0tLS0tLS0rLS0rLS0rLf/AABEIAOMA3gMBEQACEQEDEQH/xAAcAAEAAgMBAQEAAAAAAAAAAAAABgcDBAUCAQj/xABIEAABAwECCgYGBwYFBQEAAAABAAIDEQQFBhIhMUFRYXGRsQcTMoGhwSIjQnKy0RQkM1Jic5IlgqKjwvBDRGOz4TRTg4TxCP/EABoBAQACAwEAAAAAAAAAAAAAAAABBAIDBQb/xAA2EQEAAgECAwUGBAYCAwAAAAAAAQIDBBEFEjEhMkFRcRMiYYGRsSPB0fAUMzRCoeEk8VKSsv/aAAwDAQACEQMRAD8AvFAQEBAQEBAQEBB8qgqPpffNNao4mEhkLcbIaVe/Oe5obxKpanebbeT03BopjxTeetp/xH+0GY+3s7Fomb7sz28itHvx4uttp7dax9IbLMJb2Zmtc368bmp9pkjxYTpNJbrSPozsw/vhv+ad3xRO5sKn22SPFhPDNHb+yPrP6tyDpVvRvadE73oQPhIUxqbw1W4LpbdImPn+u6zujXCmS8LG6aVrQ9srmENBDaAAtNCTocruO02r29XmNZhriyzFO74bpYtiqICAgICAgICAgICAgICAgICAgIPMjwASTQAEk7BnKJiN52h+YL3vN89qktLiQ6R5dnoQPZbUamgDuXMtPNO72+LFGLHGOOkMQt81a9dJX8xx803llyV8oZW3vaB/jO76O5hN5Y+yp5Pbb7tGlzXb4meQCc0nsqvpvt1KujjP7rh5pvuiaRWN95dmGxRzXc61tbSjJC5ta4r2AgivAjeFtnHHVSjWW7s9Ux//AD+fqVoGqcHjE35KxhnscfiVdrx6LTW5zRAQEBAQEBAQEBAQEBAQEBBXmF/SjBZn9VZWieQGj3YxETdmMO2d2Qa1XvniOyO12dJwi+WObJ7seHn/AKRmPpktVfSssRGoOcDxWv8AibeS7PA8fhaXeunphsrzS0wPi/E09czvyAjgVnXUx4wq5uB5K9uO0T/hLLRftltFhmks87ZG9W6uKfSFRT0mnK3PpC2zeLVmYlzq6fJizVreu3aqo3DCcxCrckO7/EXhifgsw5qKPZpjVy15METoBUezZxrGrLgs8a1Hs2yNXDj37dL4oS45qhubWflVIrtKMmeLUmI8WG7L2cywT2euR7mkd7m43gwKZtt2MceGLe95NSw2mSOvVyOZ7ryzkVqmZXaY6zHbDuYGYX20XnZh9KldGZWMLHSue1zXnFNQ4/iVrFvHVwddyZN+SIiI6bRHb8X6XBrmVpw31AQEBAQEBAQEBAQEBBp3tekFmhdNaJAxjc7jr0ADOTsCi1oiN5bMWK2W0VpHbKksNukee2Y0VmrFZ8xp9pIPxEdkfhHfVU8mW1uyOj02h4fhw7WvMTf17I9EDWh2REPiD3ZZnMeC0kHNkNMh0KWq8RPZLqMveUaVPNLTOGstmPCCUf8A1TzywnTVbUWFDxrU+0a50kNuPC46SVPtGudHDl4W3719nDB99pPc13zU8+7CdPyTEotDmPd5rXZdwdJj0fLTJRtBnPLSlI3ndjqcnLTljrLr9Hdkx71sraZpMfujaXn4FYpO9ocjU15cNpfoyGZzcx7tCsuG6EFvByOyHwUobL5WgVc4AayaDxRMRM9HmK0sd2XtducDyUbwmaWjrDKpYiAgICAg1W3hEQCHVBygjKg8OvFugHkgxuvE6G+KgYnW9+sDuRKi+lK9ZbXeLonOJis/q2N0YxAMj95dk3NCr3t72zsaTBEYot4yjc8ojZitzqOZs9ju+3FfxgDmTWeO0QuNTE/0XA0pjRyt9KM7sibxPWDkyVnfHaYn9+HRlve23e4Y1ljtETtMT8SaMZuzIHB2vO0rC2Ov9q7p9dlrO2aImPOOv0aDXgioK07THV1a5K3jes7vNcqljZtVWKH1AQEGG1j0dxHy81NWvLG9WtEpsxw9WB2U1WcdkK1vftumfR1eViskrrTaJHGQNLI4mRF9A6mM8vNGg0qAK6StmO1a9sqerw5c8ezxV3jxlKry6VG0pZrMSfvSuAA/cZWv6lNtR5Qxw8Dt1y2+UfrP6IleOG94zVraXMB9mMCEDZVuXiVpnLefF1MXDNNj/t39e1wJZXOOM5xcTpJLjxK19V6tYrG0dj415BqCQRmINCmyZ+Kx+jbpCnZaGWW1yGSKQhjHuNXxuPZ9LO5pNBlzV42cWWYnaXC4lw/Hak5McbTHl4rtVt5oQEBAQVvDeD4Jntzsx3As/eOUajzUJSSzzte0OYag/wB0I0FBlQEFOdIdxywWuWcMJimdjiQCrWucBjMd9041aVzgjaqmWJrbfwej4flx5cUU396vghT2VOeq1czoTheDCp5mucTGYVlzNU4iOA1yZNqi14iO1nh0+Sbb07Pj++rY6vWfJaOd1Yw9nbL6G7VPP8GE6byl9y61PPDCdPfwkq7+ynNVhOLLBjnUp92WMxkr1h4dLUU1rLlapy79jXbpUSmk9WSKLWomW/FiiO2WZQ3vrGE5gTuFUJmI6swsUv8A2n/od8lOzD2lPOPqxTQvb2mOG9pHNNj2lZ6SwOcpiGFrPHWEZQaEZQcxBGlZbNF7dj9T3NM5kTWTzOkeM8jmNYTsIZkV6vZHa8dltW1pmtdo8v8At1QVk1vqAgIKxv1tLVKPxnmoSw2C2vidjNzHtNOYj+9KCXWC1NlbjMy62+0DqKD5ardDEKyyxspnx5Gs+IpumKzPSHEtuHd1x5HWxjtjGvmrsqxpHisZvVurpstulUavLD66HZBYnTf+tGwcXZfBa7XxruLR6z+2Zj5yit44S2OTsXLEzUTaZGnhFirTN8fk6WLSa2OuSfntP33R52NJJRjGMxiAGNx3DLtc4nxWuZjwhfrhyRX37R9P+nQNyzj2Fqmsrdc2OI2hjddUw9gqOWWXt6ebGbBKPYKjlll7Wnm8GzPHsHgm0suevmxmMjODwTZPNDnSSFx2aArFY5YcbNknNbfw8IfWtTmRGCJbEMOlYzbdbw4op1lsxtb7VT4LFtm0+DdhtMbczBwqeJU7tVq2nrLdZfFNPkp5mqcLMy+NqnmYzgZ2XztU8zCcDSt0UEwytDXaHtFD3gZCm8JitoeMB8EX220kPqIIneteNJ0RNOkmncMuqu3HTmUtZq/ZV2jvSvtxqa61aede4Z3NzHu0IN+C3tOR2Q+ClDbBQfUEK6Qoi10UrRWuM14plNMXFIOsZd6JhFmPBFQag6VCUdw8e8WQFjnN9Y0Gji2oLXZDTOK0WGTouaHacu0+SvrOW5iBXXrVS8T4PSaecXdtEb+bbAAzBat3QisR0h9RIgzWOYska5ucHINqjdFqxaNpd9mEE4zxngp55aJ0uOfFmZhS8Z4/BT7RhOir4Sztwsb7UQ/Sp9qw/gZ8JZBhRZzniHAhPaQx/gskdJad9X1ZnWeQRxgPLcVuypAJ4EqYvWUW0+WsbzPYhbWKJlnXGzxRrCZW8WLftnozqG+aVnwE3Yziq9MAqKmg0mmNQa6ZKpuxti7OxKLJgPNPH1lktEEzdNHujcD91zXj0TvW+MM2jes7uRk4jXDbkzVtWfr9mnacDLyZ2rI87WlsvwErGcV48GyvEdNbpePnvH3ce1WSWM0ljez32OZzCwmJjqtUyUv3ZifSd27g7c81rnEMW9787WM0vPkNJyLKlJvO0NWp1FNPTnt8o816XVdsVnhbDC2jG95JJq57jpcTlXQiIiNoeOyZLZLTe3WW2pYCAg2IXSNygGm3IPFBtx3gzMXCuoODuSlDh4fMrAw6n82lEwgJBacZuntN17Rqdz5QlyMNCHWB7hmDmH+MNIOo5Vhk7q1o5/GhWi0O2tK78BrNaYoupndE/EBeHt64Pq0HGZlbSmWoWU4InthUxcZyYt63jm8vD9XdsnRfY2/aSyv3FsY4AE+KmNPXxY343nnuxEf5dmyYE3bHmsrXHW9z5fBxp4LOMNI8FS/EtVfrf6bQ68d2wNYWMhY0EFpxY2tyEUOYbVnyxtsqzmyTaLTaZmPOUVdgnOM3Uu73M/pKr+xl2I4nin/yj6T+bBJg3OP8q13uys/qIUTit5NleIYp/vmPWJ/LdrSXER27DKNwD/hqsfZz5Nsays9Mkfb7tOa67MO3BK33oXAcSFjNI8m6uovPS0T84cO/LFY+ok6p46wAENyA5HAkcKrCYr4LNbZ570djN0fYFm1OE9oaRZ2nIMxmcCQWg6GgjKe4aabcWLm7Z6KHENfGGPZ0732djCro6c2sth9Jumzk1cPcce0Nhy70yafxr9E6HjcTtTUf+3h848Pt6K8e0gkEEEGhBFCCM4IVZ6KJiY3h8RIg27tvKazyCSCQscNI0jUQcjhsKmtprO8NObBjzV5ckbwtDBjpChmpHaqQyZg//Bcd57B35NquY9RE9lux5fW8GyYvexe9Xy8Y/VOBU5M+zOOCsOIxxWFkeMWxsjxqYxDWxY1K0rmrnPFNtkza1us77PrpoxnkH7oL+Qp4ohidboxma53Bg80GJ15H2Y2jfV/M08EGJ1vlPtkbGgM5INd7iTUkk6yanxRLo3FFjPdsbzI+SIlnw4ZWyV1PaeY81JCvVCXHwqgrY5sU09EFw0HFe08cmdY37st+lnbNX9+CsVXd5buD8h+iwOBy9WzLWhqGgV8FZr0h57PG2S3rKaXRfAfRkho/Q7MHfI81LU7CAgICAgAoPMsbXCj2hw1OaHDxTZMTNek7EcbWtDWgAAABoFAAMwAGYIiZmZ3l6QcDCXA6C2guxSybRM1tSdjx7YybxrWrJhrf1dDRcSy6Wdo7a+X6eSrrdgVb45TGYa09sPaGEHMQSRwzqnOG8Tts9Rj4ppr0i2/y27WxZ8Bpz9pLGzdV58BTxUxhnxa78Vxx3azP+HTs2BNmb9pM9/ugRj+orOMMeMq9+KZZ7tYj/P6OlZ7hsEeaAOOt7nSeBNPBZRjpHgrW1eov1t9OxJ7DORC1rCWsAOKxpxWgYxyABWad1w9TMzlnfr/p6WTSICAgICDtYNN9J52AcT/wiJZsL2VsUmzFP8xtfCqlEK2UMmnfDMazTDXG/wCAqLdGzFO2Ss/GFSqs9CtPA+XGsMOXKA5p2UkdTworFO7DhauNs1v34Owsld37ovrMyY7BIeTvnxRDvoCAg9iJ33Tvpk4oPDnNHae0bMbGPBtUGJ1riHtOdubTxcfJBideLdEf6nk+AogxOvGTRit3MHM1KDBLaHu7T3He404IOBfNrxJAPwg+JWnJPa6uipvj3+P6OW+8dq1cy7GNhfeO1N2UY2F947VG7KMaX3O6tnjOtteJJ81ap3YcHVfzrercWTQAIMMtrjbkdI0HVjCvDOgx/Tgewx7tzMUcX0QfOtmOaNrdrnlx4NA5oHUyntTU2MYG+JqfFBOrtgayJoaPZFTpOTSdKliwYQsrZJR+Anhl8kFXKGTxOyrHDW1w4tIRMTtMKcVV6RY2BlfoTC3I4OeNhGOTQ8e5b8fdcTWx+NKRRShw1EZwc4KzVXtB27ivQg9W8FzaHFy0IpoqdCIdh15fdjb3ku+QQYnXhLodT3WhvIVQa73l3aJO8k80S8oCAgICCCYa2zFtWLX/AA2eJcquafed/hlN8G/xn8kcfeO1ad3SjGwvvHao3ZRiYH3jtTdlGJadySTfRYQI2j1TPSc/P6Ay4oHmr9O7DyOqnfNf1n7t3qpj2pQNjGAeLqlZNAbAw9suf7zy4cMyDNFAxvZaBuACDIgIAQTlgoANQUsWveTawSDWx3wlBUyhk+szjeiJU3LHiuLToJHA0VV6Ws7xun+AL62QjVI4cWtPmt2Po5GvjbL8khezLVpo4adB2HWFsUmWKXG0UIzt0j5jag3rs+1G4/CUHZQEBAQEGOWdje05o3uA5oMX05nshzvdYacTQeKD518p7MVNr3geDQeaCsOkGR/09wcRUMjHoggdiozk61Sz996nhEf8aPWfujJcda0Ons+ICC97ubSCMao2D+ALp16Q8Nlne9vWfu2FLAQEBAQZLMKvaNbhzQTZSxeXtqCNYogp9QyEFTX2zFtUw/1H/GSq1usvQYJ3x19Et6O5PUyt1Paf1NI/oW3F0lz+IR79Z+CWLY57w9lcoNCMx8iNI2IN655aygEUcAaj905RrCDtyStb2nAbyBzQYfprPZq73WEjjm8UDr5D2YqbXvDfBtUDEmOd7W+6yp4uJ5IPhsYPae9295A4CgQZIrLG3ssA3AIMqAgqLpBP7Sl2CL/YYqOfvy9Zwr+lr8//AKlHVpdAQEF+xNo1o1ADgAF1IeEtO8zL0iBAQEBBtXYKzM94IhMFKBBUdtbSV41PcODioZMKCr8K2Uts3vV4tB81Xv3pd3STvhq7nRy7LONkZ4F481ni8VTiP9vzTRbXNEHuzsBkZXWBUEg0JoRUIO/FZY29lgG2mXigzICAgICAgIKgw+P7Sm/8f+wxUM3fl63hf9LX5/eUfWpfEH1ramg05EJnaH6Akzneea6jwUdHlEiAgICDfuQevb3/AAlEJWpQIKrv1tLVKPxu5qEtFEq2w2ZS3PP3hGf5TRzBVe/edrRTvhj5/dv9Hj/XSjWwHg8fNZYurVxCPdrKdLc5QgyWc+m33hzCCSICAgICAgICCncOT+0Z/eaOEbQqGbvy9dw3+lp+/FwlqXhBtXUzGtETdcjBxeAsq96GrPO2K0/CfsvZxyneuk8PD4iRAQEBB1MHW+urqaURKTKUCCs8Km0tso2g8WNPmoS5KJV/h+z60064x4OcPktGTq6/D5/DmPi84Au+tka43eBafJMfVOv/AJUeqwlvccQeoz6Q3jmgk5QfEBAQEBAQEFNYaH9oT+//AEhc/L35ev4d/TU9HFWtdEHRwbZW22cf60fg8HyWePvQr6ydsF5+E/Zdy6LxYgICAgIOzg0303nYOaIlIVKBBXeGraWx21rT4U8lCYcFEoR0iM9ZCdbXDg4fNacvWHU4dPZZzMC30t0e0SD+U7zAWNO8362PwZ+X3WUrDiCBVBKTnQfEBAQEBAQEFL4XmtvtH5hXPy9+XsdB/TU9HIWtbEHZwObW8LP+YDwBPktmLvwp8QnbTX9FzLoPHiAgICAg72DDcjz7o518lKJdxECCB4et+sMOtnJxUJhGUSh/SKz0YHajIOIYRyK1ZfB0eHT22j0/NHsFXUtsPvU4tI81hTvQuauPwbLRVhwhB8dmQSlAQEBAQEBAKCk8J3Vt1o/Nf4OIXOyd+Xs9FG2np6Q5iwWRB3sBG1vGDe88InnyW3D34UOJztpb/L7wuFX3khAQEBAQSPBtvq3HW7kFKJddECDgYW3MZ48dg9YwZB95ulu/UiYV4oSjHSAytmYdUg8WO+QWvJ0XtBP4k+iHXG/FtUJ/1GeLgPNaq9YdLPG+K3othWXnxAKCTsOQbhyQfUBAQEBAQEFHX8frc/50n+45c6/el7XS/wAinpH2aKwbxBJOjxlbyjOpsp/kvHmt2Dvw53FZ20tvjt94W2rzyggICAgIJRcDaQDaSVKJdJECAgg+GVyYhM8Y9E9sDQT7W481CYVvhuyticdT2Hxp5rDJ3VvRT+NCu7NJiva77rgeBqtDs3jmrMea435zvPNWnm4fESIJLAfQb7o5IPaAgICAgIPrc6IUVe7q2mY65ZD/ABlc2/el7fTxtip6R9mosW4QSzozb9eJ1RPPEtHmt+n77lcYn/jx6x+a01deYEBAQEBBLbnbSBm4ni4lSxluoCAg8yxhzS1wqCKEHMQgp3pPuV0FmmAysIa5jtglZUHaFhk7srWkn8av78FNqu7q5WOqAdYB4iqtPNTG07PqAgkdlPq2+6OQQZUBAQEBAQeo+0N45oieihLY6srzrc48XFcyer3WONqRHwYVDMQTPouZ9akdqipxkZ8lY0/elx+NT+FWPj+UrMVx5sQEBAQEEzsDKRMH4RyUsWdAQEBBysJ7lZbLJLZ3mmO0hr6VLXaHcVExvGzPHfktFvJ+WL5uuazTvs87cWSM0cNGsOB0gggg6iqsxt2PRUvF6xaOkrSu5+NDGdcbD/AFZjo89kja0x8WwpYiCRWL7JnuhBmQEBAQEBB6j7Q3jmiJ6Pz8SuW96ICCddFTfWzn8DRxf/wrOm6y4fG592kfGViq28+ICAgIAQTeJtGgagB4KWL2gICAgIID0r4EC3QdfA36zEPRpkMrM5jOsjKW7ajStd679sLmk1Hs7cs9JQy4DWyQ/ltHe30SPBTXpDVn/mW9W+smoQSC7z6pm7zKDYQEBAQEBB9BQfn9ct7wQEE/6KG/9Sfyhx6z5K1pvFweNz/L+f5LAVpwRAQZYbM93ZYTuGRB0ILikPaIb4lEbujBccQ7VXbzQcApN3URAgICAgICCEYYXCGevhbRpJ6xoFACTXHAGsk12naoTvv1RREiDv3YfUt7/iKDZQEBAQEBB5mNGuOpp5FJTXrCgly3uxAQWN0UxertDtb4x+lsh/qVvTdJee43b36R8J/L9FiwXZM7MwgazkCsuG6MGD/339zfmVJu6EF1wtzMB2n0kRu3ANSD6gICAgICAgICDy9gIIIqDkIOYjUgrbCO5zZ5cn2bsrDzadoUJchEu7dX2Ld7viKDbQEBAQEBBhthpE8/gf8AAVE9GWPvR6x91GWSxyyuxYo3vd91jC88AFzYiZ6PcWvWkb2nZLrp6L7zmoXRthB0yuxTT3WgniFtrgvKhl4rp8fZE7+ibXT0N2ZtDabQ+Q6WsAiZuJNT4hbq6aPGXNy8ayT3KxHr2p5clwWWyMxLNC1gJqc5JNKVLjlK31rFY2hys2fJmtzXneXTWTSICAgICAgICAgICAgINS87AyeIxvzHMdIOghBWFvsb4ZHRvGVvAjQRsUMnUug+qG880G4gICAg2oLvlf2WHecg4lEOhBg+723gbBlUm7oR3NAAQWY1QQcbLUEUI8U2ImYneGxYrDDE3FhiZG0eyxgYOACiIiOjK+S153tMzPxbClgICAgICAgICAgICAgICAgICDiYUXKJ48Zo9Yzs7RpafJBE7oBEZByEOOTuChk3443ONGtJ3CqDfguaZ2cBu8+QRDowXAwdtxOweiFJu6MFjjZ2WAbaVPFEM6AgICAgICAgICAgICAgICAgICAgICAg5bbviM7yWDLRx3kZTTuCDpRxtaKNAG4UQekBAQEBAQEBAQEBAQEBAQEBAQf/2Q=="
alt="">
<img class="newImage" id="myimage" width="100" src="https://cdn3.vectorstock.com/i/1000x1000/28/52/surprise-open-gift-box-vector-20692852.jpg" </body>
This is What I reached so far .. With help from Detect the End of CSS Animations and Transitions with JavaScript
You need to create animate class holds the animation
Add this class using javascript
Use a function to detect the end of css animation
Finally you can use .toggle() to toggle between images
$(document).ready(function(){
var animationEvent = whichAnimationEvent();
$(".circle0").addClass("animate");
$(".circle0").one(animationEvent,
function(event) {
$(".img , .newImage").toggle();
// Do something when the transition ends
});
});
function whichAnimationEvent(){
var t,
el = document.createElement("fakeelement");
var animations = {
"animation" : "animationend",
"OAnimation" : "oAnimationEnd",
"MozAnimation" : "animationend",
"WebkitAnimation": "webkitAnimationEnd"
}
for (t in animations){
if (el.style[t] !== undefined){
return animations[t];
}
}
}
.container {
margin: 10px;
}
.circle0 {
border-radius: 50%;
height: 30px;
width: 30px;
margin: 10px;
background: PaleTurquoise;
position :relative;
}
.circle0.animate{
-webkit-animation: mymove 5s; /* Safari 4.0 - 8.0 */
animation: mymove 5s;
animation-timing-function: ease-in-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
}
.newImage{
display:none;
position :absolute;
top:250px
}
#-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px; opacity: 0}
}
/* Standard syntax */
#keyframes mymove {
/* from {top: 0px;}
to {top: 250px;opacity: 0.2} */
0% {
top: 0px;
}
50% {
top: 100px;
}
100% {
top: 250px;
opacity: .3;
display:none
}
}
.img{
position :absolute;
top:250px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- <div class="container">
--> <div class="circle0"></div>
<!-- </div>
-->
<img class="img" width="100" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxATDxUSEBAWFhUVFhcVFRIXEBcQEhcVFhEXFxUSFxUYHyggGBolGxMVITEhJSktLi4uFx8zODMtNygtLisBCgoKDg0OGhAQGy4mHR0tLi0tKy0tLystLS0tKy4rLTAtLTAtLS8rLS0tKy0tLS0tLy0tLS0tLS0rLS0rLS0rLf/AABEIAOMA3gMBEQACEQEDEQH/xAAcAAEAAgMBAQEAAAAAAAAAAAAABgcDBAUCAQj/xABIEAABAwECCgYGBwYFBQEAAAABAAIDEQQFBhIhMUFRYXGRsQcTMoGhwSIjQnKy0RQkM1Jic5IlgqKjwvBDRGOz4TRTg4TxCP/EABoBAQACAwEAAAAAAAAAAAAAAAABBAIDBQb/xAA2EQEAAgECAwUGBAYCAwAAAAAAAQIDBBEFEjEhMkFRcRMiYYGRsSPB0fAUMzRCoeEk8VKSsv/aAAwDAQACEQMRAD8AvFAQEBAQEBAQEBB8qgqPpffNNao4mEhkLcbIaVe/Oe5obxKpanebbeT03BopjxTeetp/xH+0GY+3s7Fomb7sz28itHvx4uttp7dax9IbLMJb2Zmtc368bmp9pkjxYTpNJbrSPozsw/vhv+ad3xRO5sKn22SPFhPDNHb+yPrP6tyDpVvRvadE73oQPhIUxqbw1W4LpbdImPn+u6zujXCmS8LG6aVrQ9srmENBDaAAtNCTocruO02r29XmNZhriyzFO74bpYtiqICAgICAgICAgICAgICAgICAgIPMjwASTQAEk7BnKJiN52h+YL3vN89qktLiQ6R5dnoQPZbUamgDuXMtPNO72+LFGLHGOOkMQt81a9dJX8xx803llyV8oZW3vaB/jO76O5hN5Y+yp5Pbb7tGlzXb4meQCc0nsqvpvt1KujjP7rh5pvuiaRWN95dmGxRzXc61tbSjJC5ta4r2AgivAjeFtnHHVSjWW7s9Ux//AD+fqVoGqcHjE35KxhnscfiVdrx6LTW5zRAQEBAQEBAQEBAQEBAQEBBXmF/SjBZn9VZWieQGj3YxETdmMO2d2Qa1XvniOyO12dJwi+WObJ7seHn/AKRmPpktVfSssRGoOcDxWv8AibeS7PA8fhaXeunphsrzS0wPi/E09czvyAjgVnXUx4wq5uB5K9uO0T/hLLRftltFhmks87ZG9W6uKfSFRT0mnK3PpC2zeLVmYlzq6fJizVreu3aqo3DCcxCrckO7/EXhifgsw5qKPZpjVy15METoBUezZxrGrLgs8a1Hs2yNXDj37dL4oS45qhubWflVIrtKMmeLUmI8WG7L2cywT2euR7mkd7m43gwKZtt2MceGLe95NSw2mSOvVyOZ7ryzkVqmZXaY6zHbDuYGYX20XnZh9KldGZWMLHSue1zXnFNQ4/iVrFvHVwddyZN+SIiI6bRHb8X6XBrmVpw31AQEBAQEBAQEBAQEBBp3tekFmhdNaJAxjc7jr0ADOTsCi1oiN5bMWK2W0VpHbKksNukee2Y0VmrFZ8xp9pIPxEdkfhHfVU8mW1uyOj02h4fhw7WvMTf17I9EDWh2REPiD3ZZnMeC0kHNkNMh0KWq8RPZLqMveUaVPNLTOGstmPCCUf8A1TzywnTVbUWFDxrU+0a50kNuPC46SVPtGudHDl4W3719nDB99pPc13zU8+7CdPyTEotDmPd5rXZdwdJj0fLTJRtBnPLSlI3ndjqcnLTljrLr9Hdkx71sraZpMfujaXn4FYpO9ocjU15cNpfoyGZzcx7tCsuG6EFvByOyHwUobL5WgVc4AayaDxRMRM9HmK0sd2XtducDyUbwmaWjrDKpYiAgICAg1W3hEQCHVBygjKg8OvFugHkgxuvE6G+KgYnW9+sDuRKi+lK9ZbXeLonOJis/q2N0YxAMj95dk3NCr3t72zsaTBEYot4yjc8ojZitzqOZs9ju+3FfxgDmTWeO0QuNTE/0XA0pjRyt9KM7sibxPWDkyVnfHaYn9+HRlve23e4Y1ljtETtMT8SaMZuzIHB2vO0rC2Ov9q7p9dlrO2aImPOOv0aDXgioK07THV1a5K3jes7vNcqljZtVWKH1AQEGG1j0dxHy81NWvLG9WtEpsxw9WB2U1WcdkK1vftumfR1eViskrrTaJHGQNLI4mRF9A6mM8vNGg0qAK6StmO1a9sqerw5c8ezxV3jxlKry6VG0pZrMSfvSuAA/cZWv6lNtR5Qxw8Dt1y2+UfrP6IleOG94zVraXMB9mMCEDZVuXiVpnLefF1MXDNNj/t39e1wJZXOOM5xcTpJLjxK19V6tYrG0dj415BqCQRmINCmyZ+Kx+jbpCnZaGWW1yGSKQhjHuNXxuPZ9LO5pNBlzV42cWWYnaXC4lw/Hak5McbTHl4rtVt5oQEBAQVvDeD4Jntzsx3As/eOUajzUJSSzzte0OYag/wB0I0FBlQEFOdIdxywWuWcMJimdjiQCrWucBjMd9041aVzgjaqmWJrbfwej4flx5cUU396vghT2VOeq1czoTheDCp5mucTGYVlzNU4iOA1yZNqi14iO1nh0+Sbb07Pj++rY6vWfJaOd1Yw9nbL6G7VPP8GE6byl9y61PPDCdPfwkq7+ynNVhOLLBjnUp92WMxkr1h4dLUU1rLlapy79jXbpUSmk9WSKLWomW/FiiO2WZQ3vrGE5gTuFUJmI6swsUv8A2n/od8lOzD2lPOPqxTQvb2mOG9pHNNj2lZ6SwOcpiGFrPHWEZQaEZQcxBGlZbNF7dj9T3NM5kTWTzOkeM8jmNYTsIZkV6vZHa8dltW1pmtdo8v8At1QVk1vqAgIKxv1tLVKPxnmoSw2C2vidjNzHtNOYj+9KCXWC1NlbjMy62+0DqKD5ardDEKyyxspnx5Gs+IpumKzPSHEtuHd1x5HWxjtjGvmrsqxpHisZvVurpstulUavLD66HZBYnTf+tGwcXZfBa7XxruLR6z+2Zj5yit44S2OTsXLEzUTaZGnhFirTN8fk6WLSa2OuSfntP33R52NJJRjGMxiAGNx3DLtc4nxWuZjwhfrhyRX37R9P+nQNyzj2Fqmsrdc2OI2hjddUw9gqOWWXt6ebGbBKPYKjlll7Wnm8GzPHsHgm0suevmxmMjODwTZPNDnSSFx2aArFY5YcbNknNbfw8IfWtTmRGCJbEMOlYzbdbw4op1lsxtb7VT4LFtm0+DdhtMbczBwqeJU7tVq2nrLdZfFNPkp5mqcLMy+NqnmYzgZ2XztU8zCcDSt0UEwytDXaHtFD3gZCm8JitoeMB8EX220kPqIIneteNJ0RNOkmncMuqu3HTmUtZq/ZV2jvSvtxqa61aede4Z3NzHu0IN+C3tOR2Q+ClDbBQfUEK6Qoi10UrRWuM14plNMXFIOsZd6JhFmPBFQag6VCUdw8e8WQFjnN9Y0Gji2oLXZDTOK0WGTouaHacu0+SvrOW5iBXXrVS8T4PSaecXdtEb+bbAAzBat3QisR0h9RIgzWOYska5ucHINqjdFqxaNpd9mEE4zxngp55aJ0uOfFmZhS8Z4/BT7RhOir4Sztwsb7UQ/Sp9qw/gZ8JZBhRZzniHAhPaQx/gskdJad9X1ZnWeQRxgPLcVuypAJ4EqYvWUW0+WsbzPYhbWKJlnXGzxRrCZW8WLftnozqG+aVnwE3Yziq9MAqKmg0mmNQa6ZKpuxti7OxKLJgPNPH1lktEEzdNHujcD91zXj0TvW+MM2jes7uRk4jXDbkzVtWfr9mnacDLyZ2rI87WlsvwErGcV48GyvEdNbpePnvH3ce1WSWM0ljez32OZzCwmJjqtUyUv3ZifSd27g7c81rnEMW9787WM0vPkNJyLKlJvO0NWp1FNPTnt8o816XVdsVnhbDC2jG95JJq57jpcTlXQiIiNoeOyZLZLTe3WW2pYCAg2IXSNygGm3IPFBtx3gzMXCuoODuSlDh4fMrAw6n82lEwgJBacZuntN17Rqdz5QlyMNCHWB7hmDmH+MNIOo5Vhk7q1o5/GhWi0O2tK78BrNaYoupndE/EBeHt64Pq0HGZlbSmWoWU4InthUxcZyYt63jm8vD9XdsnRfY2/aSyv3FsY4AE+KmNPXxY343nnuxEf5dmyYE3bHmsrXHW9z5fBxp4LOMNI8FS/EtVfrf6bQ68d2wNYWMhY0EFpxY2tyEUOYbVnyxtsqzmyTaLTaZmPOUVdgnOM3Uu73M/pKr+xl2I4nin/yj6T+bBJg3OP8q13uys/qIUTit5NleIYp/vmPWJ/LdrSXER27DKNwD/hqsfZz5Nsays9Mkfb7tOa67MO3BK33oXAcSFjNI8m6uovPS0T84cO/LFY+ok6p46wAENyA5HAkcKrCYr4LNbZ570djN0fYFm1OE9oaRZ2nIMxmcCQWg6GgjKe4aabcWLm7Z6KHENfGGPZ0732djCro6c2sth9Jumzk1cPcce0Nhy70yafxr9E6HjcTtTUf+3h848Pt6K8e0gkEEEGhBFCCM4IVZ6KJiY3h8RIg27tvKazyCSCQscNI0jUQcjhsKmtprO8NObBjzV5ckbwtDBjpChmpHaqQyZg//Bcd57B35NquY9RE9lux5fW8GyYvexe9Xy8Y/VOBU5M+zOOCsOIxxWFkeMWxsjxqYxDWxY1K0rmrnPFNtkza1us77PrpoxnkH7oL+Qp4ohidboxma53Bg80GJ15H2Y2jfV/M08EGJ1vlPtkbGgM5INd7iTUkk6yanxRLo3FFjPdsbzI+SIlnw4ZWyV1PaeY81JCvVCXHwqgrY5sU09EFw0HFe08cmdY37st+lnbNX9+CsVXd5buD8h+iwOBy9WzLWhqGgV8FZr0h57PG2S3rKaXRfAfRkho/Q7MHfI81LU7CAgICAgAoPMsbXCj2hw1OaHDxTZMTNek7EcbWtDWgAAABoFAAMwAGYIiZmZ3l6QcDCXA6C2guxSybRM1tSdjx7YybxrWrJhrf1dDRcSy6Wdo7a+X6eSrrdgVb45TGYa09sPaGEHMQSRwzqnOG8Tts9Rj4ppr0i2/y27WxZ8Bpz9pLGzdV58BTxUxhnxa78Vxx3azP+HTs2BNmb9pM9/ugRj+orOMMeMq9+KZZ7tYj/P6OlZ7hsEeaAOOt7nSeBNPBZRjpHgrW1eov1t9OxJ7DORC1rCWsAOKxpxWgYxyABWad1w9TMzlnfr/p6WTSICAgICDtYNN9J52AcT/wiJZsL2VsUmzFP8xtfCqlEK2UMmnfDMazTDXG/wCAqLdGzFO2Ss/GFSqs9CtPA+XGsMOXKA5p2UkdTworFO7DhauNs1v34Owsld37ovrMyY7BIeTvnxRDvoCAg9iJ33Tvpk4oPDnNHae0bMbGPBtUGJ1riHtOdubTxcfJBideLdEf6nk+AogxOvGTRit3MHM1KDBLaHu7T3He404IOBfNrxJAPwg+JWnJPa6uipvj3+P6OW+8dq1cy7GNhfeO1N2UY2F947VG7KMaX3O6tnjOtteJJ81ap3YcHVfzrercWTQAIMMtrjbkdI0HVjCvDOgx/Tgewx7tzMUcX0QfOtmOaNrdrnlx4NA5oHUyntTU2MYG+JqfFBOrtgayJoaPZFTpOTSdKliwYQsrZJR+Anhl8kFXKGTxOyrHDW1w4tIRMTtMKcVV6RY2BlfoTC3I4OeNhGOTQ8e5b8fdcTWx+NKRRShw1EZwc4KzVXtB27ivQg9W8FzaHFy0IpoqdCIdh15fdjb3ku+QQYnXhLodT3WhvIVQa73l3aJO8k80S8oCAgICCCYa2zFtWLX/AA2eJcquafed/hlN8G/xn8kcfeO1ad3SjGwvvHao3ZRiYH3jtTdlGJadySTfRYQI2j1TPSc/P6Ay4oHmr9O7DyOqnfNf1n7t3qpj2pQNjGAeLqlZNAbAw9suf7zy4cMyDNFAxvZaBuACDIgIAQTlgoANQUsWveTawSDWx3wlBUyhk+szjeiJU3LHiuLToJHA0VV6Ws7xun+AL62QjVI4cWtPmt2Po5GvjbL8khezLVpo4adB2HWFsUmWKXG0UIzt0j5jag3rs+1G4/CUHZQEBAQEGOWdje05o3uA5oMX05nshzvdYacTQeKD518p7MVNr3geDQeaCsOkGR/09wcRUMjHoggdiozk61Sz996nhEf8aPWfujJcda0Ons+ICC97ubSCMao2D+ALp16Q8Nlne9vWfu2FLAQEBAQZLMKvaNbhzQTZSxeXtqCNYogp9QyEFTX2zFtUw/1H/GSq1usvQYJ3x19Et6O5PUyt1Paf1NI/oW3F0lz+IR79Z+CWLY57w9lcoNCMx8iNI2IN655aygEUcAaj905RrCDtyStb2nAbyBzQYfprPZq73WEjjm8UDr5D2YqbXvDfBtUDEmOd7W+6yp4uJ5IPhsYPae9295A4CgQZIrLG3ssA3AIMqAgqLpBP7Sl2CL/YYqOfvy9Zwr+lr8//AKlHVpdAQEF+xNo1o1ADgAF1IeEtO8zL0iBAQEBBtXYKzM94IhMFKBBUdtbSV41PcODioZMKCr8K2Uts3vV4tB81Xv3pd3STvhq7nRy7LONkZ4F481ni8VTiP9vzTRbXNEHuzsBkZXWBUEg0JoRUIO/FZY29lgG2mXigzICAgICAgIKgw+P7Sm/8f+wxUM3fl63hf9LX5/eUfWpfEH1ramg05EJnaH6Akzneea6jwUdHlEiAgICDfuQevb3/AAlEJWpQIKrv1tLVKPxu5qEtFEq2w2ZS3PP3hGf5TRzBVe/edrRTvhj5/dv9Hj/XSjWwHg8fNZYurVxCPdrKdLc5QgyWc+m33hzCCSICAgICAgICCncOT+0Z/eaOEbQqGbvy9dw3+lp+/FwlqXhBtXUzGtETdcjBxeAsq96GrPO2K0/CfsvZxyneuk8PD4iRAQEBB1MHW+urqaURKTKUCCs8Km0tso2g8WNPmoS5KJV/h+z60064x4OcPktGTq6/D5/DmPi84Au+tka43eBafJMfVOv/AJUeqwlvccQeoz6Q3jmgk5QfEBAQEBAQEFNYaH9oT+//AEhc/L35ev4d/TU9HFWtdEHRwbZW22cf60fg8HyWePvQr6ydsF5+E/Zdy6LxYgICAgIOzg0303nYOaIlIVKBBXeGraWx21rT4U8lCYcFEoR0iM9ZCdbXDg4fNacvWHU4dPZZzMC30t0e0SD+U7zAWNO8362PwZ+X3WUrDiCBVBKTnQfEBAQEBAQEFL4XmtvtH5hXPy9+XsdB/TU9HIWtbEHZwObW8LP+YDwBPktmLvwp8QnbTX9FzLoPHiAgICAg72DDcjz7o518lKJdxECCB4et+sMOtnJxUJhGUSh/SKz0YHajIOIYRyK1ZfB0eHT22j0/NHsFXUtsPvU4tI81hTvQuauPwbLRVhwhB8dmQSlAQEBAQEBAKCk8J3Vt1o/Nf4OIXOyd+Xs9FG2np6Q5iwWRB3sBG1vGDe88InnyW3D34UOJztpb/L7wuFX3khAQEBAQSPBtvq3HW7kFKJddECDgYW3MZ48dg9YwZB95ulu/UiYV4oSjHSAytmYdUg8WO+QWvJ0XtBP4k+iHXG/FtUJ/1GeLgPNaq9YdLPG+K3othWXnxAKCTsOQbhyQfUBAQEBAQEFHX8frc/50n+45c6/el7XS/wAinpH2aKwbxBJOjxlbyjOpsp/kvHmt2Dvw53FZ20tvjt94W2rzyggICAgIJRcDaQDaSVKJdJECAgg+GVyYhM8Y9E9sDQT7W481CYVvhuyticdT2Hxp5rDJ3VvRT+NCu7NJiva77rgeBqtDs3jmrMea435zvPNWnm4fESIJLAfQb7o5IPaAgICAgIPrc6IUVe7q2mY65ZD/ABlc2/el7fTxtip6R9mosW4QSzozb9eJ1RPPEtHmt+n77lcYn/jx6x+a01deYEBAQEBBLbnbSBm4ni4lSxluoCAg8yxhzS1wqCKEHMQgp3pPuV0FmmAysIa5jtglZUHaFhk7srWkn8av78FNqu7q5WOqAdYB4iqtPNTG07PqAgkdlPq2+6OQQZUBAQEBAQeo+0N45oieihLY6srzrc48XFcyer3WONqRHwYVDMQTPouZ9akdqipxkZ8lY0/elx+NT+FWPj+UrMVx5sQEBAQEEzsDKRMH4RyUsWdAQEBBysJ7lZbLJLZ3mmO0hr6VLXaHcVExvGzPHfktFvJ+WL5uuazTvs87cWSM0cNGsOB0gggg6iqsxt2PRUvF6xaOkrSu5+NDGdcbD/AFZjo89kja0x8WwpYiCRWL7JnuhBmQEBAQEBB6j7Q3jmiJ6Pz8SuW96ICCddFTfWzn8DRxf/wrOm6y4fG592kfGViq28+ICAgIAQTeJtGgagB4KWL2gICAgIID0r4EC3QdfA36zEPRpkMrM5jOsjKW7ajStd679sLmk1Hs7cs9JQy4DWyQ/ltHe30SPBTXpDVn/mW9W+smoQSC7z6pm7zKDYQEBAQEBB9BQfn9ct7wQEE/6KG/9Sfyhx6z5K1pvFweNz/L+f5LAVpwRAQZYbM93ZYTuGRB0ILikPaIb4lEbujBccQ7VXbzQcApN3URAgICAgICCEYYXCGevhbRpJ6xoFACTXHAGsk12naoTvv1RREiDv3YfUt7/iKDZQEBAQEBB5mNGuOpp5FJTXrCgly3uxAQWN0UxertDtb4x+lsh/qVvTdJee43b36R8J/L9FiwXZM7MwgazkCsuG6MGD/339zfmVJu6EF1wtzMB2n0kRu3ANSD6gICAgICAgICDy9gIIIqDkIOYjUgrbCO5zZ5cn2bsrDzadoUJchEu7dX2Ld7viKDbQEBAQEBBhthpE8/gf8AAVE9GWPvR6x91GWSxyyuxYo3vd91jC88AFzYiZ6PcWvWkb2nZLrp6L7zmoXRthB0yuxTT3WgniFtrgvKhl4rp8fZE7+ibXT0N2ZtDabQ+Q6WsAiZuJNT4hbq6aPGXNy8ayT3KxHr2p5clwWWyMxLNC1gJqc5JNKVLjlK31rFY2hys2fJmtzXneXTWTSICAgICAgICAgICAgINS87AyeIxvzHMdIOghBWFvsb4ZHRvGVvAjQRsUMnUug+qG880G4gICAg2oLvlf2WHecg4lEOhBg+723gbBlUm7oR3NAAQWY1QQcbLUEUI8U2ImYneGxYrDDE3FhiZG0eyxgYOACiIiOjK+S153tMzPxbClgICAgICAgICAgICAgICAgICDiYUXKJ48Zo9Yzs7RpafJBE7oBEZByEOOTuChk3443ONGtJ3CqDfguaZ2cBu8+QRDowXAwdtxOweiFJu6MFjjZ2WAbaVPFEM6AgICAgICAgICAgICAgICAgICAgICAg5bbviM7yWDLRx3kZTTuCDpRxtaKNAG4UQekBAQEBAQEBAQEBAQEBAQEBAQf/2Q==" alt="">
<img class="newImage" width="100" src="https://cdn3.vectorstock.com/i/1000x1000/28/52/surprise-open-gift-box-vector-20692852.jpg"
</body>
</html>
To be honest: simple way is to use setTimeout after 5 seconds .. If its not what you looking for then you can use my answer
Here is actual solution for your question :https://jsfiddle.net/t8re0vnk/1/
You can handle this by binding event to animation circle.
var element = document.getElementById("circle0");
element.addEventListener("animationend", function() {console.log('zxcxzc'); changeImg();}, false);
function changeImg(){
document.getElementById("img").src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqcPW3wEJ3qv3zjTkw5DQaDkgmCiTDclMKMVHp9RZ8VJpZkxal9g';
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- <div class="container">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
--> <div id="circle0" class="circle0"></div>
<!-- </div>
-->
<img class="img" width="100" id="img" src="https://mk0westpacklifeyuwd8.kinstacdn.com/wp-content/uploads/99508-gift-box-small-blue-34284-copy-1.jpg" alt="">
</body>
</html>

Inherit css value from body (parent) not working

I'm want to disable all css transitions using JavaScript. I added transition: none to the body (via JavaScript), but the elements in the body still have a transition.
Of course I can loop through all elements, and add transition = 'none';, but I'm sure there's a better way of temporary disabling the css transition of all elements. Here's a sample code:
JSFiddle
var sample = document.getElementById('sample');
sample.addEventListener('click', function() {
if (document.body.style.transition === 'none') {
document.body.style.transition = '';
} else {
document.body.style.transition = 'none';
}
})
#sample {
width: 200px;
height: 100px;
background: lawngreen;
transition: transform 500ms ease;
}
#sample:hover {
transform: translateX(50px);
}
<div id="sample">Hover over me to move
<br />Click to disable transition</div>
Add a new class name to the body or parent tag. Set transitions with the new parent selector .animated #sample:
<body class="animated">
<div id="sample"></div>
</body>
... and the styles:
#sample {
width: 200px;
height: 100px;
background: lawngreen;
}
.animated #sample {
transition: transform 500ms ease;
}
.animated #sample:hover {
transform: translateX(50px);
}
To disable animations of all children just remove the .animated class from the body or parent tag.
Modified fiddle: https://jsfiddle.net/xjxauu0h/1/
you'll want to use a class on body so you can turn it on and off.
var sample = document.getElementById('sample');
document.body.classList.add('transitioner');
sample.addEventListener('click', function() {
if (document.body.classList && document.body.classList.length) {
document.body.classList.remove('transitioner');
} else {
document.body.classList.add('transitioner');
}
console.log(document.body.classList);
})
#sample {
width: 200px;
height: 100px;
background: lawngreen;
}
.transitioner *{
transition: transform 500ms ease;
}
#sample:hover {
transform: translateX(50px);
}
<div id="sample">Hover over me to move
<br />Click to disable transition</div>
var sample = $('#sample');
var body = $('body');
sample.click(function() {
body.toggleClass('notransition notransform');
});
#sample {
width: 200px;
height: 100px;
background: lawngreen;
transition: transform 500ms ease;
}
#sample:hover {
transform: translateX(50px);
}
.notransition.notransform #sample {
background: HotPink;
}
.notransition * {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
.notransform * {
-webkit-transform: none !important;
-moz-transform: none !important;
-o-transform: none !important;
-ms-transform: none !important;
transform: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sample">Hover over me to move
<br />Click to disable transition</div>

Categories