Develop Reference

Light/Dark mode toggle changes background but not my function to change fill of SVG (using css variables/ GSAP/and JS)

I am trying to have a Light/Dark mode toggle in my website where it not only changes the background color, but it changes the fill color of the SVG waves I have. I have the background colors working and I created a function// timeline for the waves using GSAP but for some reason, it won't play. I have created a CodePen since I didn't know how to add GSAP into Stack. Any and all help is appreciated! https://codepen.io/maddylobb/pen/gOXNEeQ
import * as gsap from "https://cdn.skypack.dev/gsap#3.9.1";
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
function switchTheme(e){
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
console.log("wave play");
waveColorTL.play();
}
else{
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme','light');
console.log("wave reverse");
waveColorTL.reverse();
}
console.log(toggleSwitch.checked +'this is the value for the checkbox');
}
toggleSwitch.addEventListener('change', switchTheme, false);
//GSAP function to change the fill of svg//
const waveColorTL = new gsap.timeline({paused:true});
tanWaveTL.to("#tanWave2",{duration:0.05, fill:"000"});
waveColorTL.add(tanWaveTL, "wave")
:root {
--lightpink: #FFC3A4;
--white: #fff;
--darkpurple: #2E1845;
}
[data-theme="dark"] {
--lightpink: #DC9C7C;
--white: #fff;
--darkpurple: #22152F;
}
#hero-2 {
height: 100vh;
background-color: var(--lightpink);
#tanWave {
width: 100%;
margin-top: -40px;
#include md {
margin-top: -40px;
}
#include lg {
margin-top: -60px;
}
#include lg {
margin-top: -85px;
}
}
.theme-switch-wrapper {
grid-area: search;
display: flex;
align-items: center;
justify-content: center;
justify-content: column;
width: 100%;
#light-dark-text {
margin-left: 10px;
font-size: 1rem;
}
}
.theme-switch {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.theme-switch input {
display: none;
}
.slider {
background-color: var(--darkpurple);
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
}
.slider:before {
background-color: var(--white);
bottom: 4px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: .4s;
width: 26px;
}
input:checked+.slider {
background-color: var(--white);
}
input:checked+.slider:before {
transform: translateX(26px);
background-color: var(--darkpurple);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
}
<section id="hero-2">
<section class="theme-switch-wrapper">
<label id="light-dark-label" class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
<p id="light-dark-text">Enable Dark Mode!</p>
</section>
<div id="tanWave" class="wave">
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 28">
<g id="tanWave2" fill="#F9D5AE">
<path d="M94.304 14.776v12.33h15.482H0V14.764c2.453.475 8.95-.522 15.31-8.308 6.362-7.786 12.067-6.41 14.124-4.748.792.475 2.754 2.28 4.273 5.697-1.226-.83-4.059-1.899-5.578.475-1.52 2.374-.633 5.183 0 6.29 1.029 1.464 4.107 4.012 8.19 2.493 4.082-1.52 6.369-4.51 7.002-5.816 1.464-2.334 4.866-7.358 6.765-8.782 1.9-1.425 4.51-1.939 5.578-2.018 2.651-.277 8.166.57 9.02 6.172-1.582-1.148-5.103-2.635-6.527.593-1.424 3.228.91 6.25 1.899 7.359 1.82 1.384 5.863 3.062 10.326-1.306 1.7-1.424 5.84-5.198 8.783-8.901C82.108.26 87.433.046 89.728.402c2.334.119 6.955 1.567 6.765 6.41-1.701-.713-5.175-1.07-5.46 3.204-.176 2.649 1.463 4.066 3.271 4.76ZM281.859 14.776c-1.809-.694-3.448-2.111-3.271-4.76.285-4.273 3.758-3.917 5.459-3.205.19-4.842-4.431-6.29-6.765-6.41-2.294-.355-7.619-.141-10.563 3.562-2.943 3.703-7.082 7.477-8.783 8.901-4.462 4.368-8.506 2.69-10.326 1.306-.989-1.108-3.323-4.13-1.899-7.359 1.425-3.228 4.946-1.74 6.528-.593-.854-5.602-6.369-6.45-9.02-6.172-1.068.079-3.679.593-5.578 2.018-1.899 1.424-5.302 6.448-6.766 8.782-.633 1.306-2.919 4.297-7.002 5.816-4.083 1.52-7.161-1.028-8.19-2.492-.633-1.108-1.519-3.917 0-6.29 1.52-2.375 4.352-1.306 5.579-.476-1.519-3.418-3.482-5.222-4.273-5.696-2.057-1.662-7.762-3.039-14.124 4.747-6.362 7.786-12.858 8.783-15.311 8.308v12.344h94.305v-12.33Z"/>
<path d="M188.462 14.776c-1.809-.694-3.448-2.111-3.271-4.76.285-4.273 3.758-3.917 5.459-3.205.19-4.842-4.431-6.29-6.765-6.41-2.294-.355-7.619-.141-10.563 3.562-2.943 3.703-7.082 7.477-8.783 8.901-4.462 4.368-8.506 2.69-10.326 1.306-.989-1.108-3.323-4.13-1.899-7.359 1.425-3.228 4.946-1.74 6.528-.593-.854-5.602-6.369-6.45-9.02-6.172-1.068.079-3.679.593-5.578 2.018-1.899 1.424-5.302 6.448-6.766 8.782-.633 1.306-2.919 4.297-7.002 5.816-4.083 1.52-7.161-1.028-8.19-2.492-.633-1.108-1.519-3.917 0-6.29 1.52-2.375 4.352-1.306 5.579-.476-1.519-3.418-3.482-5.222-4.273-5.696-2.057-1.662-7.762-3.039-14.124 4.747-6.361 7.786-12.858 8.783-15.31 8.308v12.344h94.304v-12.33ZM376.016 14.776c-1.808-.694-3.447-2.111-3.271-4.76.285-4.273 3.759-3.917 5.46-3.205.19-4.842-4.431-6.29-6.765-6.41-2.295-.355-7.62-.141-10.563 3.562-2.944 3.703-7.082 7.477-8.783 8.901-4.463 4.368-8.506 2.69-10.326 1.306-.989-1.108-3.323-4.13-1.899-7.359 1.424-3.228 4.945-1.74 6.528-.593-.855-5.602-6.37-6.45-9.021-6.172-1.068.079-3.679.593-5.578 2.018-1.899 1.424-5.301 6.448-6.765 8.782-.633 1.306-2.92 4.297-7.003 5.816-4.083 1.52-7.16-1.028-8.189-2.492-.633-1.108-1.519-3.917 0-6.29 1.519-2.375 4.352-1.306 5.578-.476-1.519-3.418-3.481-5.222-4.273-5.696-2.057-1.662-7.762-3.039-14.123 4.747-6.362 7.786-12.858 8.783-15.311 8.308v12.344h94.304v-12.33Z"/>
</g>
</svg>
</div>
</section>

Google Chrome does not display the cover page when loading a carousel video I wrote?

I wrote a static website that has a video carousel function and uses the poster attribute, but the cover will not be displayed when Google Chrome loads, and the loading is very slow, but the cover will flash when it is refreshed. Will not be displayed. However, this problem does not occur in Firefox, and the loading speed is also OK. Ask everyone what is going on? ?
$(function(){
var click=0;
var right=0; //解决第一次右边点击没反应
$('.video>div:last-child').click(function(){ //当点击左边按钮
for(var i=0; i<5; i++){
document.getElementsByTagName('video')[i].pause();}
click+=1;
if(click>=6)click=1;
right=1;
$('.video li:nth-of-type('+(((click+0)<=5) ? (click+0) : (click+0-5))+')').attr('class','video5');
$('.video li:nth-of-type('+(((click+1)<=5) ? (click+1) : (click+1-5))+')').attr('class','video1');
$('.video li:nth-of-type('+(((click+2)<=5) ? (click+2) : (click+2-5))+')').attr('class','video2');
$('.video li:nth-of-type('+(((click+3)<=5) ? (click+3) : (click+3-5))+')').attr('class','video3');
$('.video li:nth-of-type('+(((click+4)<=5) ? (click+4) : (click+4-5))+')').attr('class','video4');
})
$('.video>div:first-child').click(function(){ //当点击右边按钮
for(var i=0; i<5; i++){
document.getElementsByTagName('video')[i].pause();}
click-=1;
if(click<=0)click=5;
if(!right)click=4; //解决第一次右边点击没反应
right=1;
$('.video li:nth-of-type('+(((click+0)<=5) ? (click+0) : (click+0-5))+')').attr('class','video5');
$('.video li:nth-of-type('+(((click+1)<=5) ? (click+1) : (click+1-5))+')').attr('class','video1');
$('.video li:nth-of-type('+(((click+2)<=5) ? (click+2) : (click+2-5))+')').attr('class','video2');
$('.video li:nth-of-type('+(((click+3)<=5) ? (click+3) : (click+3-5))+')').attr('class','video3');
$('.video li:nth-of-type('+(((click+4)<=5) ? (click+4) : (click+4-5))+')').attr('class','video4');
})
})
//播放完后
//控制条
function mouseOver1() {
var video=document.getElementById("v001");
video.controls=true;
}
function mouseOut1() {
var video=document.getElementById("v001");
video.controls=false;
}
function mouseOver2() {
var video=document.getElementById("v002");
video.controls=true;
}
function mouseOut2() {
var video=document.getElementById("v002");
video.controls=false;
}
function mouseOver3() {
var video=document.getElementById("v003");
video.controls=true;
}
function mouseOut3() {
var video=document.getElementById("v003");
video.controls=false;
}
function mouseOver4() {
var video=document.getElementById("v004");
video.controls=true;
}
function mouseOut4() {
var video=document.getElementById("v004");
video.controls=false;
}
function mouseOver5() {
var video=document.getElementById("v005");
video.controls=true;
}
function mouseOut5() {
var video=document.getElementById("v005");
video.controls=false;
}
.Lunbo-video{
/* background-color:#dc2626; */
padding-top:0px;
padding-bottom:50px;
}
.Lunbo-video .Lunbo-video-title{
margin:20px auto 50px;
}
.Lunbo-video .Lunbo-video-title .Lunbo-video-h1{
font-size:30px;
color:#ef7700;
height:50px;
line-height:50px;
}
.Lunbo-video .Lunbo-video-title .Lunbo-video-h3{
font-size:30px;
color:#ef7700;
text-align: center;
}
.Lunbo-video .Lunbo-video-cont{
margin-bottom:50px;
height: 100%;
}
.Lunbo-video li{
list-style: none;
}
.video{
width:80%;
margin:0 auto;
overflow: hidden;
zoom:1;
border-bottom: 1px solid #e6e6e6;
background: #ffffff;
}
.video>div{
float: left;
height: 509px;
}
.video>div:first-child {
width: 5%;
display:flex;
align-items:center;
justify-content:center;
/* background: url('image\left.png') center center/cover no-repeat; */
}
.Lunbobutton{
width: 100%;
height: auto;
}
.video>div:last-child {
width: 5%;
display:flex;
align-items:center;
justify-content:center;
/* background: rgb(240, 13, 114); */
/* background: url('image\right.png') center center no-repeat; */
}
.video>div:nth-of-type(2){
width: 90%;
}
.video ul{
position: relative;
}
.video li{
transition: all .6s;
position: absolute;
background: url(../images/video-bg.png) center center no-repeat;
background-size: 100% 100%;}
/*.video li>div{padding: 1% 1% 4%;}*/
.video li video{
width:100%;
height:100%;
}
.video li h3{
text-align: center;
margin-top: 2px;
color: #1766d7;
}
.video1{
width:18%;
height: auto;
/* top: 143px; */
left: 0;
z-index: 1;
}/*创建5个播放框初始位置*/
.video2{
width: 37%;
height: auto;
/* top: 86px; */
left: 8%;
z-index: 2;
}
.video3{
width: 64%;
height: auto;
/* top: 0px; */
left: 17%;
z-index: 3;
}
.video4{
width: 37%;
height: auto;
/* top: 86px; */
left: 54%;
z-index: 2;
}
.video5{
width:18%;
height: auto;
/* top: 143px; */
left: 82%;
z-index: 1;}
<div class="Lunbo-video">
<div class="Lunbo-video-title">
<h1 class="Lunbo-video-h3 text-center">急救小视频</h1>
</div>
<div class="Lunbo-video-cont">
<div class="video">
<div> <img src="images/left.png" class="Lunbobutton"> </div>
<div>
<ul>
<li class="video1"><div><video id="v001" onmouseover="mouseOver1()" onmouseout="mouseOut1()" src="video/zhixi.mp4" preload="auto" poster="images/t1zhixi.png"></video></div> </li>
<li class="video2"><div><video id="v002" onmouseover="mouseOver2()" onmouseout="mouseOut2()" src="video/yundao.mp4" preload="auto" poster="images/t2yundao.jpg"></video></div> </li>
<li class="video3"><div><video id="v003" onmouseover="mouseOver3()" onmouseout="mouseOut3()" src="video/yundao.mp4" preload="auto" poster="images/t3yundao.png"></video> </div></li>
<li class="video4"><div><video id="v004" onmouseover="mouseOver4()" onmouseout="mouseOut4()" src="video/zhixi.mp4" preload="auto" poster="images/t4.png"></video> </div></li>
<li class="video5"><div><video id="v005" onmouseover="mouseOver5()" onmouseout="mouseOut5()" src="video/zhixi.mp4" preload="auto" poster="images/t1zhixi.png"></video> </div></li>
</ul>
</div>
<div><img src="images/right.png" class="Lunbobutton"></div>
</div>
</div>
</div>

How to rotate 4 children within a circle 90 degrees every 3 seconds using CSS custom properties and transform?

I'm trying to rotate 4 children (.feat) elements within a circle 90 degrees every 3 seconds using a CSS custom property called --angle, but it doesn't seem to work as expected:
function rotation() {
let inner = document.querySelector('[inn]');
let rota = inner.style.transform;
}
setInterval(rotation, 3000);
.feat-cont {
width: 60vmax;
height: 60vmax;
}
.feat-cont p {
display: inline-block;
}
.inner {
--angle: 0;
position: relative;
background-color: yellow;
transform: rotate(var(--angle) * 1deg);
width: 100%;
height: 100%;
border-radius: 50%;
}
.feat {
position: absolute;
}
.feat1 {
left: 25vmax;
}
.feat2 {
left: 50vmax;
top: 25vmax;
}
.feat3 {
left: 25vmax;
top: 50vmax;
}
.feat4 {
top: 25vmax;
}
<div class='feat-cont'>
<div class='inner' inn>
<div class='feat feat1' f1>
<img src="https://img.icons8.com/nolan/64/fast-forward.png"/>
<p>Fast Performance</p>
</div>
<div class='feat feat2' f2>
<img src="https://img.icons8.com/color/48/000000/memory-slot.png"/>
<p>64 GBs of memory</p>
</div>
<div class='feat feat3' f3>
<img src="https://img.icons8.com/nolan/64/camera.png"/>
<p>3K MP camera</p>
</div>
<div class='feat feat4' f4>
<img src="https://img.icons8.com/dusk/64/000000/branding.png"/>
<p>Trusted brand</p>
</div>
</div>
</div>

You can change the angle CSS custom property using CSSStyleDeclaration.setProperty():
circle.style.setProperty('--angle', `${ angle }deg`);
Also, note you use it as transform: rotate(var(--angle)), not as rotate(var(--angle) * 1deg), so the unit should already be included in the CSS property.
If you don't want to use CSS properties, you can change the style attribute directly:
circle.style.transform = `rotate(${ angle }deg)`;
However, I guess you need to rotate the circle in one direction while rotating all the children (.feat) in the opposite direction to keep them straight, so using CSS properties is probably more convenient, as otherwise, you would have to change the style attribute in all 4 children:
const circle = document.querySelector('.circle');
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
const step = 90;
let angle = 0;
let intervalID = null;
function updateRotation() {
circle.style.setProperty('--angle', `${ angle }deg`);
circle.style.setProperty('--angle-inverse', `${ -angle }deg`);
}
function autoRotate() {
intervalID = setInterval(() => {
angle += step;
updateRotation();
}, 3000);
}
prev.onclick = () => {
clearInterval(intervalID);
angle -= step;
updateRotation();
autoRotate();
};
next.onclick = () => {
clearInterval(intervalID);
angle += step;
updateRotation();
autoRotate();
};
autoRotate();
body {
font-family: monospace;
}
.container {
width: 60vmax;
height: 60vmax;
margin: 0 auto;
overflow: hidden;
}
.circle {
--angle: 0;
--angle-inverse: 0;
position: relative;
background-color: yellow;
width: 100%;
height: 100%;
border-radius: 50%;
transition: transform linear 1s;
transform: rotate(var(--angle));
}
.feat {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 20vmax;
height: 20vmax;
text-align: center;
transition: transform linear 1s;
}
.feat > img {
width: 10vmax;
height: 10vmax;
}
.feat > p {
margin: 8px 0 0;
}
.feat1 {
top: 0;
left: 50%;
transform: translate(-50%, 0) rotate(var(--angle-inverse));
}
.feat2 {
right: 0;
top: 50%;
transform: translate(0, -50%) rotate(var(--angle-inverse));
}
.feat3 {
bottom: 0;
left: 50%;
transform: translate(-50%, 0) rotate(var(--angle-inverse));
}
.feat4 {
left: 0;
top: 50%;
transform: translate(0, -50%) rotate(var(--angle-inverse));
}
.button {
position: fixed;
top: 0;
bottom: 0;
background: transparent;
border: 0;
padding: 32px;
outline: none;
font-family: monospace;
font-size: 32px;
}
.button:hover {
background: rgba(0, 0, 0, .0625);
}
.prev {
left: 0;
}
.next {
right: 0;
}
<div class="container">
<button class="button prev">‹</button>
<div class="circle">
<div class="feat feat1">
<img src="https://img.icons8.com/nolan/64/fast-forward.png"/>
<p>Fast Performance</p>
</div>
<div class="feat feat2">
<img src="https://img.icons8.com/color/48/000000/memory-slot.png"/>
<p>64 GBs of memory</p>
</div>
<div class="feat feat3">
<img src="https://img.icons8.com/nolan/64/camera.png"/>
<p>3K MP camera</p>
</div>
<div class="feat feat4">
<img src="https://img.icons8.com/dusk/64/000000/branding.png"/>
<p>Trusted brand</p>
</div>
</div>
<button class="button next">›</button>
</div>

I have added a pure CSS solution, You might not need javascript manipulations at all, it's lightweight too.
Just use CSS inbuilt Animation property.
.inner{animation: rotate 12s infinite;}
#keyframes rotate{
0%{transform: rotate(0deg);}
25%{transform: rotate(90deg);}
50%{transform: rotate(180deg);}
75%{transform: rotate(270deg);}
100%{transform: rotate(360deg);}
}
Find the codepen here
.feat-cont {
width: 60vmax;
height: 60vmax;
}
.feat-cont p {
display: inline-block;
}
.inner {
position: relative;
background-color: yellow;
width: 100%;
height: 100%;
border-radius: 50%;
}
.feat {
position: absolute;
}
.feat1 {
left: 25vmax;
}
.feat2 {
left: 50vmax;
top: 25vmax;
}
.feat3 {
left: 25vmax;
top: 50vmax;
}
.feat4 {
top: 25vmax;
}
.inner {
animation: rotate 12s infinite;
}
#keyframes rotate{
0%{transform: rotate(0deg);}
25%{transform: rotate(90deg);}
50%{transform: rotate(180deg);}
75%{transform: rotate(270deg);}
100%{transform: rotate(360deg);}
}
#keyframes r-rotate{
0%{transform: rotate(0deg);}
25%{transform: rotate(-90deg);}
50%{transform: rotate(-180deg);}
75%{transform: rotate(-270deg);}
100%{transform: rotate(-360deg);}
}
.feat {
animation: r-rotate 12s infinite;
}
<nav></nav>
<main>
<section>
<div class='feat-cont'>
<div class='inner' inn>
<div class='feat feat1' f1>
<img src="https://img.icons8.com/nolan/64/fast-forward.png"/><br><p>Fast Performance</p>
</div>
<div class='feat feat2' f2>
<img src="https://img.icons8.com/color/48/000000/memory-slot.png"/><br><p>64 GBs of memory</p>
</div>
<div class='feat feat3' f3>
<img src="https://img.icons8.com/nolan/64/camera.png"/><br><p>3K MP camera</p>
</div>
<div class='feat feat4' f4>
<img src="https://img.icons8.com/dusk/64/000000/branding.png"/><br><p>Trusted brand</p>
</div>
</div>
</div>
</section>
<section class='ndsection'>
</main>

Update Your javascript Code
setInterval(rotation, 3000);
var deg = 90;
let inner = document.querySelector('.inner');
function rotation() {
inner.style.transform='rotate('+deg+'deg)';
}

Creating 2 buttons that reveal content from 2 different direction

I want to create 2 buttons can when clicked will reveal their respective content from 2 different directions.
Example:
When a user click on smt, the content will open from the left.
When a user click on mi, the content will open from the right.
So far, I managed to do the smt part only as I don't know how to make the "mi" part work.
Below is my code:
Style:
<style>
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 60;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 60px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 650px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
SMT button:
<div id="myNav" class="overlay">
×
<div class="overlay-content">Smt</div>
</div>
<span style="font-size:30px;cursor:pointer; position:absolute; top:680px; left:300px;" onclick="openNav()">smt</span>
JavaScript:
<script>
function openNav() {
document.getElementById( "myNav" ).style.width = "100%";
}
function closeNav() {
document.getElementById( "myNav" ).style.width = "0%";
}
</script>
How can I re-use the same code for the second button?

I think you are looking for this.. May be this could hep you
I use jquery-ui, function slide to achieve desire effect
Using single content
$('#loginPanel').click(function(){
if ($('#userNav').is(':hidden')) {
$('#userNav').show('slide',{direction:'left'},1000);
} else {
$('#userNav').hide('slide',{direction:'left'},1000);
}
});
$('#loginPanel1').click(function(){
if ($('#userNav').is(':hidden')) {
$('#userNav').show('slide',{direction:'right'},1000);
} else {
$('#userNav').hide('slide',{direction:'right'},1000);
}
});
a {
color: #000;
cursor:pointer;
display:block;
}
#userNav{
width: 200px;
height: 200px;
display: none;
background: #ff0000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<button id="loginPanel">left-to-right</button>
<button id="loginPanel1">right-to-left</button>
<div id="userNav">User Area</div>
Using separate content (i use flex to make both content show inline you can just remove class main-content to show them on separate line as block)
$('#loginPanel').click(function(){
if ($('#userNav').is(':hidden')) {
$('#userNav').show('slide',{direction:'left'},1000);
} else {
$('#userNav').hide('slide',{direction:'left'},1000);
}
});
$('#loginPanel1').click(function(){
if ($('#userNav1').is(':hidden')) {
$('#userNav1').show('slide',{direction:'right'},1000);
} else {
$('#userNav1').hide('slide',{direction:'right'},1000);
}
});
a {
color: #000;
cursor:pointer;
display:block;
}
.area{
width: 200px;
height: 200px;
display: none;
background: #ff0000;
}
.main-content {
display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<button id="loginPanel">left-to-right</button>
<button id="loginPanel1">right-to-left</button>
<div class="main-content">
<div class="area" id="userNav">User Area 1</div>
<div class="area" id="userNav1">User Area 2</div>
</div>

You can pass the Id to the function like this:
onclick="openNav("myNav1")"
And if you need to hide element, You can use: display: "none"
<script>
function openNav(id) {
document.getElementById(id).style.display = "block";
}
function closeNav(id) {
document.getElementById(id).style.display = "none";
}
</script>

Just need to do this for the code:
Add "2" to "openNav", "myNav2", "closeNav2"
< script>
function openNav2() {
document.getElementById( "myNav2" ).style.width = "100%";
}
function closeNav2() {
document.getElementById( "myNav2" ).style.width = "0%";
}
</script>
Same for the button code, add "2" to "myNav", "openNav", "closeNav"
<div id="myNav" class="overlay">
×
<div class="overlay-content">MI</div>
</div>
<span style="font-size:30px;cursor:pointer; position:absolute; top:680px;
left:300px;" onclick="openNav()">MI</span>

Jquery animate() effect doesn't function well

When hover on the first and second element, some element will animate to the left, it works well if hovered with a normal speed, but will crashed if hovered too fast for some times
(the text won't show or the text won't move back to its original place when mouseoff, checkout the figures below).
Any suggestions would be appreciated.
1.text won't show
2.text won't move back to its original place
$(document).ready(function() {
var flag = false;
$(".tab-ico").hover(function() {
var f = $(this);
f.data('timeout', window.setTimeout(function() {
f.find(".tab-text").stop(true, true).animate({
left: "-=64"
}, 300, function() {
flag = true;
});
}, 300));
}, function() {
clearTimeout($(this).data("timeout"));
if (flag === true) {
$(this).find(".tab-text").stop(true, true).animate({
left: "+=64"
}, 300, function() {
flag = false;
});
}
});
});
.pfm-toolbar-wrap {
height: 100%;
position: fixed;
right: 0;
top: 0;
width: 35px;
z-index: 9990;
}
.pfm-tbar-tab-Spike {
position: relative;
width: 35px;
}
.pfm-toolbar-tabs {
border-right: 5px solid #7a6e6e;
height: 100%;
}
.p-tab div.tab-ico {
background: #7a6e6e;
}
.tab-text {
border-radius: 3px;
color: #fff;
height: 32px;
left: 0px;
line-height: 32px;
position: absolute;
text-align: center;
width: 70px;
padding-right: 5px;
z-index: -1;
background: #7a6e6e;
}
.tab-text a {
color: #fff;
display: block;
}
.p-tab {
left: 0;
margin-top: -100px;
position: absolute;
top: 50%;
width: 35px;
z-index: 9;
text-align: center;
}
.p-tab div.tab-ico:hover {
background: #e20531;
cursor: pointer;
}
.p-tab div.tab-ico:hover .tab-text {
background: #e20531;
}
.tab-ico {
width:35px;
height:35px;
margin-bottom:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="pfm-toolbar-wrap">
<div class="pfm-toolbar-tabs">
<div class="p-tab">
<div class="pfm-tbar-tab-Spike m_b15">
<div class="tab-ico cart"> <i class="cbl-icon"></i> <em class="tab-text"> text</em>
</div>
</div>
<div class="pfm-tbar-tab-group m_b15">
<div class="tab-ico "> <i class="cbl-icon"></i>
<em class="tab-text"> text2</em>
</div>
</div>
</div>
</div>
</div>

you can use css transition-delay property as follows:
transition-delay: 1s; /* delays for 1 second */
-webkit-transition-delay: 1s; /* for Safari & Chrome */
Find more info here.

I suggest that you use CSS transition, here are two links that will help you make that with less code and using CSS transition
https://css-tricks.com/almanac/properties/t/transition/
https://blog.alexmaccaw.com/css-transitions