JQuery style fade in with regular JavaScript
How do I make an jquery style fade in with regular javascript?
Needs some refactoring. For modern browsers use classLIst. What is a jquery style fade in with regular javascript? How do you make a jquery style fade in with regular javascript? This script and codes were developed by Chris Maki on 12 August 2022, Friday.
JQuery style fade in with regular JavaScript - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery style fade in with regular JavaScript</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="my-account">Clicker </div>
<div id="my-account-logon" class="hidden"><span class="close">X</span></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
JQuery style fade in with regular JavaScript - Script Codes CSS Codes
#my-account{ width: 200px; margin-left: auto; margin-right: auto; font-size: 2em; cursor:pointer; margin-top:40px
}
#my-account-logon:after { top: -4%; left: 20%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-bottom-color: #666; border-width: 0 10px 10px 10px;
}
#my-account-logon { background-color: #666; width: 200px; height: 200px; position: relative; margin-top: 5px; margin-left: auto; margin-right: auto;
}
.close { float: right; padding: 10px; color: #fff; cursor: pointer
}
.hidden {display: none}
@-webkit-keyframes fade-in-down { 0% { opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes fade-in-down { 0% { opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
.fade-in-down{ animation-name: fade-in-down; -webkit-animation-name: fade-in-down; animation-duration: .5s; -webkit-animation-duration: .5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%;
}
@-webkit-keyframes fade-out-up { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes fade-out-up { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
.fade-out-up{ animation-name: fade-out-up; -webkit-animation-name: fade-out-up; animation-duration: .5s; -webkit-animation-duration: .5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%;
}
JQuery style fade in with regular JavaScript - Script Codes JS Codes
/*function tester(){
document.getElementById('my-account').addEventListener('click', function(){ document.getElementById('my-account-logon').style.display = 'block';
});
}tester();*/
function tester2(){
// listener for any clicks on the document.
document.addEventListener("click", function(e) { var account = document.getElementById("my-account-logon"); var accountVisible = account.className.indexOf("hidden") == -1; //check to see if user clicks outside of the if (accountVisible && e.target != account) { document.getElementById("my-account"); account.className = "hidden"; }
});
document.getElementById("my-account").addEventListener("click", function(e) { e.preventDefault(); e.stopPropagation(); var myOrder = document.getElementById("my-account-logon"); var myOrderVisible = myOrder.className.indexOf("hidden") == -1; if (myOrderVisible) { myOrder.className = "hidden"; } else { myOrder.className = "fade-in-down"; }
});
}tester2();
Developer | Chris Maki |
Username | chrisMaki |
Uploaded | August 12, 2022 |
Rating | 3 |
Size | 2,508 Kb |
Views | 36,432 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Morphing svg using Kute.js | 2,417 Kb |
Simple Responsive Modal | 2,272 Kb |
Css expanding search | 1,728 Kb |
Mutli-step form using GSAP | 4,226 Kb |
Simple Modal | 2,114 Kb |
Scroll to view if element partially out of view port height | 2,104 Kb |
Parallax Type Thing | 7,000 Kb |
JQuery style fade in with regular JavaScript | 2,508 Kb |
Objects move into place when scrolled into view | 2,175 Kb |
Messing with GSAP | 2,506 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Hello People | Danburrows | 2,365 Kb |
Starfield using KineticJS | Asp | 3,512 Kb |
Spinners using Font Icons | Keyamoon | 3,007 Kb |
Simple Responsive Text | Fbrz | 2,282 Kb |
Eunice A | Ejbronze | 2,203 Kb |
Disable JavaScript execution from console | Ludviglindblom | 2,534 Kb |
CSS Piano | Dannystyle | 5,138 Kb |
Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
Bootstrap Responsive Menu Drawer | JesseGlacken | 3,777 Kb |
Masonry | Uriuriuriu | 5,005 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!