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 |
Light bulb svg loader | 2,344 Kb |
A Pen by chris maki | 2,711 Kb |
Overlay using mix-blend-mode | 2,771 Kb |
Mobile navigation using GSAP | 3,145 Kb |
Morphing svg using Kute.js | 2,417 Kb |
Parallax Type Thing | 7,000 Kb |
Mutli-step form using GSAP | 4,226 Kb |
Messing with GSAP | 2,506 Kb |
Show dialogue with blur animation | 2,085 Kb |
Simple Modal | 2,114 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 |
Bezier Animation with straight paths | Rhernando | 2,087 Kb |
Mega Menu by Joni | Asakasinsky | 3,171 Kb |
Elon Musk - Tribute Page - FreeCodeCamp | Yunnimun | 8,615 Kb |
Add This API | ThatGuySam | 2,848 Kb |
A Pen by Gregory Potdevin | GregoryPotdevin | 1,713 Kb |
Angular-HAML | Cwacht | 2,022 Kb |
Testing Portfolio Page | Sideshowli | 3,395 Kb |
My Interests | Anshusaxenaarora | 2,015 Kb |
Canvas snow | Win7killer | 2,572 Kb |
A bit of elegance | Hackthevoid | 9,095 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!