prevent effect hover from occurring until previous effect has completed

prevent effect hover from occurring until previous effect has completed - javascript

Currently if I hover over an element it displays the animation I am looking for, and hides the other elements on the page.
The issue I am facing is that if I hover over many of the divs quickly it queues, and hides the divs one after an other. I want to just allow one div to be hidden when hovered on, and when all animations are complete allow the functionality work again.
See jsfiddle here
If you hover quickly over the divs you will see that they appear/disappear and this keeps repeating. I want more control over this, and to only allow the effect to happen again, once the animation is complete.
Please also see code below for convenience.
I tried adding
if(!$(".wrapper").is(":animated")){....
but unfortunately this didn't work.
html
<div class="box-1">
<div class="wrapper">
<div class="background-out label-1 label"></div>
<div class="background-over label-1 label"></div>
<div class="background-info">
<div class="text">Bla bla bla.</div>
</div>
</div>
</div>
<div class="box-2">
<div class="wrapper">
<div class="background-out label-2 label"></div>
<div class="background-over label-2 label"></div>
<div class="background-info">
<div class="text">Bla bla bla</div>
</div>
</div>
</div>
css
.box-1 {
position: absolute;
top: 40%;
left: 40%;
}
.box-2 {
position: absolute;
top: 10%;
left: 40%;
}
.wrapper {
position: relative;
width: 100px;
height: 100px;
margin: 0 0 20px;
}
.background-out,
.background-over {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.background-out,
.background-over,
.background-info {
transition: opacity 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -moz-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -webkit-transform 600ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
}
.background-info {
position: absolute;
left: 100px;
top: 0;
width: 100%;
height: 100%;
opacity: 0.2;
transform-origin: 0% 50% 0px;
transform: rotateY(-90deg);
background-color: #f8f8f8;
}
.background-info .text {
font-size: 12px;
letter-spacing: 1px;
text-align: center;
width: 80%;
margin-left: 10%;
margin-top: 5px;
}
.background-out {
transition-timing-function: linear;
}
.wrapper:hover .background-out {
visibility: hidden;
}
.wrapper:hover .background-over,
.wrapper:hover .background-info {
transform: translate3d(0px, 0px, 0px) rotateY(0deg);
transition: opacity 1000ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -moz-transform 1000ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms, -webkit-transform 1000ms cubic-bezier(0.55, 0.31, 0.15, 0.93) 0ms;
opacity: 1;
}
.background-over {
background-color: transparent;
opacity: 0;
transform-origin: 100% 50% 0px;
transform: rotateY(-90deg);
}
.label-1 {
background: yellow;
}
.label-2 {
background: pink;
;
}
.label {
animation-duration: 1s;
animation-name: slidein;
}
JS
$('.wrapper').hover(function() {
$('.wrapper').not(this).fadeOut('slow');
$('.wrapper .label').not(this).removeClass('label');
}, function() {
$('.wrapper').not(this).fadeIn('slow');
});

You need to use the jQuery .stop() method to prevent the animations queuing.
https://jsfiddle.net/po34gv6v/11/
$('.wrapper').hover(function() {
$('.wrapper').not(this).stop().fadeOut('slow');
$('.wrapper .label').not(this).removeClass('label');
}, function() {
$('.wrapper').not(this).stop().fadeIn('slow');
});
see: https://api.jquery.com/stop/

Related

STOP the <a and href tags pops up to another page and instead play within the main page

I'm kind of new to the programming world and the professor requires me to stop the popping and play the music in the background of the main page when he clicks on the word "PLAY MUSIC". I don't know how to do that, although I have tried a lot. Is it even possible to do that ?
$(document).ready(function(){
for (var i=1; i <= $('.slider__slide').length; i++){
$('.slider__indicators').append('<div class="slider__indicator" data-slide="'+i+'"></div>')
}
setTimeout(function(){
$('.slider__wrap').addClass('slider__wrap--hacked');
}, 1000);
})
function goToSlide(number){
$('.slider__slide').removeClass('slider__slide--active');
$('.slider__slide[data-slide='+number+']').addClass('slider__slide--active');
}
$('.slider__next, .go-to-next').on('click', function(){
var currentSlide = Number($('.slider__slide--active').data('slide'));
var totalSlides = $('.slider__slide').length;
currentSlide++
if (currentSlide > totalSlides){
currentSlide = 1;
}
goToSlide(currentSlide);
})
body {
background: #aaa;
font-family: "Open Sans", sans-serif;
}
.slider {
position: relative;
height: 100vh;
width: 100vw;
background: #777;
overflow: hidden;
}
.slider__wrap {
position: absolute;
width: 100vw;
height: 100vh;
transform: translateX(100vw);
top: 0%;
left: 0;
right: auto;
overflow: hidden;
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transform-origin: 0% 50%;
transition-delay: 450ms;
opacity: 0;
}
.slider__wrap--hacked {
opacity: 1;
}
.slider__back {
position: absolute;
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: none;
transition: filter 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__inner {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0%;
background-size: auto 133.3333%;
background-position: center;
background-repeat: none;
transform: scale(0.75);
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 450ms step-end;
opacity: 0;
box-shadow: 0 3vh 3vh rgba(0, 0, 0, 0);
padding: 15vh;
box-sizing: border-box;
}
.slider__content {
position: relative;
top: 50%;
width: auto;
transform: translateY(-50%);
color: white;
font-family: "Heebo", sans-serif;
opacity: 0;
transition: opacity 450ms;
}
.slider__content h1 {
font-weight: 900;
font-size: 9vh;
line-height: 0.85;
margin-bottom: 0.75vh;
pointer-events: none;
text-shadow: 0 0.375vh 0.75vh rgba(0, 0, 0, 0.1);
}
.slider__content a {
cursor: pointer;
font-size: 2.4vh;
letter-spacing: 0.3vh;
font-weight: 100;
position: relative;
}
.slider__content a:after {
content: "";
display: block;
width: 9vh;
background: white;
height: 1px;
position: absolute;
top: 50%;
left: 6vh;
transform: translateY(-50%);
transform-origin: 0% 50%;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:before {
content: "";
border-top: 1px solid white;
border-right: 1px solid white;
display: block;
width: 1vh;
height: 1vh;
transform: translateX(0) translateY(-50%) rotate(45deg);
position: absolute;
font-family: "Heebo", sans-serif;
font-weight: 100;
top: 50%;
left: 15vh;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:after {
transform: scaleX(1.5);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:before {
transform: translateX(6vh) translateY(-50%) rotate(45deg);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__slide {
position: absolute;
left: 0;
height: 100vh;
width: 100vw;
transition: transform 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 600ms;
pointer-events: none;
z-index: 0;
}
.slider__slide--active {
transform: translatex(0%);
z-index: 2;
}
.slider__slide--active .slider__wrap {
transform: translateX(0);
transform-origin: 100% 50%;
opacity: 1;
-webkit-animation: none;
animation: none;
}
.slider__slide--active .slider__back {
filter: blur(1.5vh);
transition: filter 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 900ms !important;
}
.slider__slide--active .slider__inner {
transform: scale(0.8);
box-shadow: 0 1vh 6vh rgba(0, 0, 0, 0.2);
pointer-events: auto;
opacity: 1;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 1ms step-end;
transition-delay: 900ms;
}
.slider__slide--active .slider__content {
opacity: 1;
transition-delay: 1350ms;
}
.slider__slide:not(.slider__slide--active) .slider__wrap {
-webkit-animation-name: hack;
animation-name: hack;
-webkit-animation-duration: 900ms;
animation-duration: 900ms;
-webkit-animation-delay: 450ms;
animation-delay: 450ms;
-webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#-webkit-keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
#keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
.slider__slide:nth-child(1) .slider__back, .slider__slide:nth-child(1) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=931);
}
.slider__slide:nth-child(2) .slider__back, .slider__slide:nth-child(2) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=929);
}
.slider__slide:nth-child(3) .slider__back, .slider__slide:nth-child(3) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=927);
}
.sig {
position: fixed;
bottom: 8px;
right: 8px;
text-decoration: none;
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 2px;
z-index: 9999;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Popout Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Heebo:100,900|Open+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="slider">
<div class="slider__slide slider__slide--active" data-slide="1">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> One</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="2">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Two</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="3">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Three</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__indicators"></div>
</div><a class="sig" href="https://audio.code.org/win1.mp3" target="_blank">PLAY MUSIC</a>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>

You can follow these steps:
Add an <audio> tag to your HTML with a src attribute containing the URI for the audio you want to play. This tag is the one which will load the content from https://audio.code.org/win1.mp3.
<audio src="https://audio.code.org/win1.mp3" id="myAudio"></audio>
Remove the href attribute from your .sig anchor (<a>) element, since it will not take the user to the audio resource webpage anymore. Instead, it will work like a button which will be responsible for playing the audio when clicked.
Having an <a> element working as a <button> element isn't good for accessibility, unless you make this behavior explicit by means of role="button". This attribute will indicate that your <a> will work as a button. Yes, you can also replace that tag with a <button> tag as long as you are willing to modify your CSS for maintaining aesthetics.
<a class="sig" role="button">PLAY MUSIC</a>
In your JavaScript code, attach a click event to .sig, telling it to play the audio you want when it's clicked.
$('.sig').on('click', () => $('#myAudio').get(0).play());
Try it below.
$(document).ready(function(){
for (var i=1; i <= $('.slider__slide').length; i++){
$('.slider__indicators').append('<div class="slider__indicator" data-slide="'+i+'"></div>')
}
setTimeout(function(){
$('.slider__wrap').addClass('slider__wrap--hacked');
}, 1000);
})
function goToSlide(number){
$('.slider__slide').removeClass('slider__slide--active');
$('.slider__slide[data-slide='+number+']').addClass('slider__slide--active');
}
$('.slider__next, .go-to-next').on('click', function(){
var currentSlide = Number($('.slider__slide--active').data('slide'));
var totalSlides = $('.slider__slide').length;
currentSlide++
if (currentSlide > totalSlides){
currentSlide = 1;
}
goToSlide(currentSlide);
})
$('.sig').on('click', () => $('#myAudio').get(0).play());
body {
background: #aaa;
font-family: "Open Sans", sans-serif;
}
.slider {
position: relative;
height: 100vh;
width: 100vw;
background: #777;
overflow: hidden;
}
.slider__wrap {
position: absolute;
width: 100vw;
height: 100vh;
transform: translateX(100vw);
top: 0%;
left: 0;
right: auto;
overflow: hidden;
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transform-origin: 0% 50%;
transition-delay: 450ms;
opacity: 0;
}
.slider__wrap--hacked {
opacity: 1;
}
.slider__back {
position: absolute;
width: 100%;
height: 100%;
background-size: auto 100%;
background-position: center;
background-repeat: none;
transition: filter 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__inner {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0%;
background-size: auto 133.3333%;
background-position: center;
background-repeat: none;
transform: scale(0.75);
transition: transform 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 450ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 450ms step-end;
opacity: 0;
box-shadow: 0 3vh 3vh rgba(0, 0, 0, 0);
padding: 15vh;
box-sizing: border-box;
}
.slider__content {
position: relative;
top: 50%;
width: auto;
transform: translateY(-50%);
color: white;
font-family: "Heebo", sans-serif;
opacity: 0;
transition: opacity 450ms;
}
.slider__content h1 {
font-weight: 900;
font-size: 9vh;
line-height: 0.85;
margin-bottom: 0.75vh;
pointer-events: none;
text-shadow: 0 0.375vh 0.75vh rgba(0, 0, 0, 0.1);
}
.slider__content a {
cursor: pointer;
font-size: 2.4vh;
letter-spacing: 0.3vh;
font-weight: 100;
position: relative;
}
.slider__content a:after {
content: "";
display: block;
width: 9vh;
background: white;
height: 1px;
position: absolute;
top: 50%;
left: 6vh;
transform: translateY(-50%);
transform-origin: 0% 50%;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:before {
content: "";
border-top: 1px solid white;
border-right: 1px solid white;
display: block;
width: 1vh;
height: 1vh;
transform: translateX(0) translateY(-50%) rotate(45deg);
position: absolute;
font-family: "Heebo", sans-serif;
font-weight: 100;
top: 50%;
left: 15vh;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:after {
transform: scaleX(1.5);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__content a:hover:before {
transform: translateX(6vh) translateY(-50%) rotate(45deg);
transition: transform 1200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.slider__slide {
position: absolute;
left: 0;
height: 100vh;
width: 100vw;
transition: transform 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 600ms;
pointer-events: none;
z-index: 0;
}
.slider__slide--active {
transform: translatex(0%);
z-index: 2;
}
.slider__slide--active .slider__wrap {
transform: translateX(0);
transform-origin: 100% 50%;
opacity: 1;
-webkit-animation: none;
animation: none;
}
.slider__slide--active .slider__back {
filter: blur(1.5vh);
transition: filter 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-delay: 900ms !important;
}
.slider__slide--active .slider__inner {
transform: scale(0.8);
box-shadow: 0 1vh 6vh rgba(0, 0, 0, 0.2);
pointer-events: auto;
opacity: 1;
transition: transform 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), box-shadow 900ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 1ms step-end;
transition-delay: 900ms;
}
.slider__slide--active .slider__content {
opacity: 1;
transition-delay: 1350ms;
}
.slider__slide:not(.slider__slide--active) .slider__wrap {
-webkit-animation-name: hack;
animation-name: hack;
-webkit-animation-duration: 900ms;
animation-duration: 900ms;
-webkit-animation-delay: 450ms;
animation-delay: 450ms;
-webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#-webkit-keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
#keyframes hack {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-100vw);
opacity: 1;
}
51% {
transform: translateX(-100vw);
opacity: 0;
}
52% {
transform: translateX(100vw);
opacity: 0;
}
100% {
transform: translateX(100vw);
opacity: 1;
}
}
.slider__slide:nth-child(1) .slider__back, .slider__slide:nth-child(1) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=931);
}
.slider__slide:nth-child(2) .slider__back, .slider__slide:nth-child(2) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=929);
}
.slider__slide:nth-child(3) .slider__back, .slider__slide:nth-child(3) .slider__inner {
background-image: url(https://unsplash.it/1600/800/?image=927);
}
.sig {
position: fixed;
bottom: 8px;
right: 8px;
text-decoration: none;
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 2px;
z-index: 9999;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Popout Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Heebo:100,900|Open+Sans:300" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="slider">
<div class="slider__slide slider__slide--active" data-slide="1">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> One</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="2">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Two</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__slide" data-slide="3">
<div class="slider__wrap">
<div class="slider__back"></div>
</div>
<div class="slider__inner">
<div class="slider__content">
<h1>Slide <br> Three</h1><a class="go-to-next">next</a>
</div>
</div>
</div>
<div class="slider__indicators"></div>
</div>
<audio src="https://audio.code.org/win1.mp3" id="myAudio"></audio>
<a class="sig" role="button">PLAY MUSIC</a>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>

How to condition styling child by hover on parent only?

In the code below when I hover on the gray button [the parent]
it perform some style on the child div bar
and that is what I need, I don't want child to be hovered itself
.foo {
width: 200px;
height: 50px;
background: gray;
margin: 200px;
position: relative;
}
.baz {
position: absolute;
width: 50px;
height: 300px;
top: -150px;
left: 80px;
z-index: -1;
border: 1px solid;
}
.bar {
height: 100%;
background: url(https://images6.alphacoders.com/411/411189.jpg) no-repeat center;
background-position: cover;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transition: -webkit-transform 0.25s ease;
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}
.foo:hover .bar {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: right;
transform-origin: right;
}
<div class="foo">
<div class="baz">
<div class="bar"></div>
</div>
</div>

I guess you want the end user hover on the horizontal area (div.foo) to have the vertical area (div.baz div.bar) change but don't want the area change if the div.baz itself being hover?
Would this fix your issue?
.foo {
width: 200px;
height: 50px;
background: gray;
margin: 200px;
position: relative;
}
.baz {
position: absolute;
width: 50px;
height: 300px;
top: -150px;
left: 80px;
z-index: -1;
border: 1px solid;
}
.bar {
height: 100%;
background: url(https://images6.alphacoders.com/411/411189.jpg) no-repeat center;
background-position: cover;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: left;
transform-origin: left;
-webkit-transition: -webkit-transform 0.25s ease;
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}
.foo:hover .baz:not(:hover) .bar {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: right;
transform-origin: right;
}
<div class="foo">
<div class="baz">
<div class="bar"></div>
</div>
</div>

This is probably not the answer you're looking for (like many, I prefer to solve CSS problems with pure CSS solutions as often as possible), but you did tag your question with javascript, so I think it's a legitimate approach to solve the issue you're facing with 3 lines of javascript:
const foo = document.getElementsByClassName('foo')[0];
foo.addEventListener('mouseover', (e) => e.target.classList.add('hovered'), false);
foo.addEventListener('mouseout', (e) => e.target.classList.remove('hovered'), false);
This works because the events mouseover and mouseout events are explicitly added to foo, rather than to its grandchild bar (and bar never visibly overlaps foo).
Working Example:
const foo = document.getElementsByClassName('foo')[0];
foo.addEventListener('mouseover', (e) => e.target.classList.add('hovered'), false);
foo.addEventListener('mouseout', (e) => e.target.classList.remove('hovered'), false);
.foo {
width: 200px;
height: 50px;
background: gray;
margin: 200px;
position: relative;
}
.baz {
position: absolute;
width: 50px;
height: 300px;
top: -150px;
left: 80px;
z-index: -1;
border: 1px solid;
}
.bar {
height: 100%;
background: url(https://images6.alphacoders.com/411/411189.jpg) no-repeat center;
background-position: cover;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s ease;
}
.foo.hovered .bar {
transform: scaleX(1);
transform-origin: right;
}
<div class="foo">
<div class="baz">
<div class="bar"></div>
</div>
</div>

How to divide in sections in four quadrants + make clicks in collapsable listbox independent of clicks in section

Description/Approach
I'm trying to merge the two pens:
https://codepen.io/ramsaylanier/pen/xcdiq?q=section&limit=all&type=type-pens
and
https://codepen.io/jasonpaul/pen/NxjvjW?q=collapse&order=popularity&depth=everything&show_forks=false
Ideally, I would like to make the four sections appear in a quadrant-like form (two sections in the first row and two sections in the bottom row). Each section should have a collapsable listbox. When the user clicks on the listbox the section shouldn't expand as well. Clicks in the listbox and in the section should be independent.
Regarding the clicks I think I have to tell the toggleClass to ignore clicks on .collapsible. Not sure how.
$('.section').on('click', function(){
$(this).toggleClass('expanded');
})
$(".collapsible").collapsible({accordion: true});
$(".collapsible").collapsible({accordion: false});
Code
https://codepen.io/szeconku/pen/oqBPvO
I need to figure out how to make clicks in the listbox independent of the clicks in the section and how to add a second row. Any help is appreciated.

Codepen updated : https://codepen.io/anon/pen/oqBrbq
$('.section').on('click', function(e){
$(this).toggleClass('expanded');
})
$(".collapsible").collapsible({accordion: true});
$(".collapsible").click(function(e){
e.stopPropagation();
});
.section {
background-size: cover;
position: absolute;
height: calc( 50% - 2px);
width: 50vw;
overflow: hidden;
/*#include skew(-10deg, 0deg);*/
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
transition: all 300ms ease-out;
border-left: 2px solid white;
border-right: 2px solid white;
cursor: pointer;
}
.section::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
background-color: #3498DB;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
-webkit-transition: all 500ms ease-out;
transition: all 500ms ease-out;
}
.section::after {
content: "";
display: block;
position: absolute;
top: 0;
left: -15%;
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
width: 130%;
height: 100%;
opacity: 0.3;
z-index: -1;
-moz-transform: skew(10deg, 0deg);
-ms-transform: skew(10deg, 0deg);
-webkit-transform: skew(10deg, 0deg);
transform: skew(10deg, 0deg);
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
transition: all 300ms ease-out;
overflow: hidden;
}
.section:hover {
width: 47%;
z-index: 30;
}
.section:hover::after {
background-size: 50%;
}
.section:hover:last-of-type {
left: 53%;
}
.section.expanded {
width: 100% !important;
left: 0px;
height: 100%;
z-index: 100;
-moz-transform: skew(0deg, 0deg);
-ms-transform: skew(0deg, 0deg);
-webkit-transform: skew(0deg, 0deg);
transform: skew(0deg, 0deg);
}
.section.expanded::after {
-moz-transform: skew(0deg, 0deg);
-ms-transform: skew(0deg, 0deg);
-webkit-transform: skew(0deg, 0deg);
transform: skew(0deg, 0deg);
background-size: 50%;
background-position: left;
}
.section.expanded:hover:last-of-type {
left: 0px;
}
.section.expanded:hover::after {
background-size: 50%;
background-position: left;
}
.section-1 {
left: 0;
top: 0;
}
.section-1::before {
background-color: #1DB45D;
}
.section-2 {
left: 50%;
top: 0;
}
.section-2::before {
background-color: #3498DB;
}
.section-3 {
left: 0;
bottom: 0;
}
.section-3::before {
background-color: #9B59B6;
}
.section-4 {
left: 50%;
bottom: 0;
}
.section-4::before {
background-color: #F06D3A;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<section class="section-1 section">
<h1>Title 1</h1>
<div class="container">
<ul class="collapsible" data-collapsible="expandable">
<li>
<div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Bullet 1</div>
<div class="collapsible-body">
<p>Bullet 1 text</div>
</ul>
</div>
</section>
<section class="section-2 section">
<h1>Title 2</h1>
</section>
<section class="section-3 section">
<h1>Title 3</h1>
</section>
<section class="section-4 section">
<h1>Title 4</h1>
</section>
</div>

REACT - Child position with respect of scale of parent

I have a situation, where I have a parent div in which there can be any number of children divs, now I am applying scale on the parent div, so since the scale is applied on parent it looks that the child element is displacing from its position, I want the children divs to follow parent scale how to manage this situation, here are some portion of my code..
<div className="image-viewer">
<div className="image-wrapper">
<div class="zoom-2 image-outer">
<img class="map-image" src="map.png"/>
<div class="booth" style="left: 617px; top: 178px;"> </div>
<div class="booth" style="left: 735px; top: 160px;"> </div>
</div>
</div>
</div>
In the above code the child elements have there left and top defined dynamically by mouse click position on map image. I have four predefined zoom levels from css which I am supplying dynamically on Zoom In/Out buttons.
Below are my css
.image-viewer .image-wrapper {
position: relative;
width: 92vw;
height: 92vh;
margin: 4vh 4vw;
overflow: hidden;
}
.image-viewer .image-outer {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
transition: all .35s ease;
-webkit-transition: all .35s ease;
}
.image-viewer .image-outer .map-image {
display: inline-block;
vertical-align: middle;
max-width: 100%;
max-height: 100%;
width: auto !important;
height: auto !important;
background-size: contain!important;
background-position: center!important;
background-repeat: no-repeat !important;
transform: scale3d(1, 1, 1);
-webkit-transform: scale3d(1, 1, 1);
transition: all .4s ease;
-webkit-transition: all .4s ease;
animation: image-fade-in 0.4s ease;
-webkit-animation: image-fade-in 0.4s ease;
}
.image-viewer .image-outer.zoom-1 {
cursor: default;
}
.image-viewer .image-outer.zoom-2 .map-image {
transform: scale3d(1.5, 1.5, 1);
-webkit-transform: scale3d(1.5, 1.5, 1);
}
.image-viewer .image-outer.zoom-3 .map-image {
transform: scale3d(2, 2, 1);
-webkit-transform: scale3d(2, 2, 1);
}
.image-viewer .image-outer.zoom-4 .map-image {
transform: scale3d(2.5, 2.5, 1);
-webkit-transform: scale3d(2.5, 2.5, 1);
}
.image-viewer .image-outer.zoom-5 .map-image {
transform: scale3d(3, 3, 1);
-webkit-transform: scale3d(3, 3, 1);
}
.booth{
width:9px;
height:9px;
border-color:white;
border-width:1px;
border-style:solid;
position:absolute;
z-index:999;
background-color: red;
transition: all .2s ease-in-out;
}
.booth:hover{
cursor: pointer;
transform: scale(2.0);
}
Here is my jsFiddle - https://jsfiddle.net/veda_in/o2qLt4q8/33/

Just change this.
.image-viewer .image-outer.zoom-2 .map-image {
transform: scale3d(1.5, 1.5, 1);
-webkit-transform: scale3d(1.5, 1.5, 1);
}
to :
.image-viewer .image-outer.zoom-2 {
transform: scale3d(1.5, 1.5, 1);
-webkit-transform: scale3d(1.5, 1.5, 1);
}
The problem here is when you are scaling map image, image is scaling but class zoom-2 width is not scaling, which is container for both booth element and map image.
.image-viewer .image-outer {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
transition: all .35s ease;
-webkit-transition: all .35s ease;
}
So either you scale zoom-2 div class or add zoom-2 class to map-image and define map-image relative.

Multiple CSS animations: How to avoid re-triggering one of them?

I am trying to build an animated menu for mobile apps similar to Pinterest's radial menu. I have managed to get the behaviour to where I want it except for one minor detail: when the menu opens, the items shoot out as I want them to, and when you hover on them, they transform as I want them to. problem is, after the cursor leaves the items, they re-trigger their original animation, instead of just returning to their previous state. I realise this is a problem to do with the class being used for the animation and I have tried a number of solutions, including deleting the class and adding a new one .onmouseover() and changing animation running state on hover/mousover. I am probably missing something simple and idiotic, but I just cannot see it. can anybody help?
The following code is just the way I had it before trying to implement solutions.
HTML:
<!--Footer-->
<div class="footer">
<!--RADIAL NAV MENU-->
<div id="navContainer">
<!--Buttons-->
<div id="workouts" class="sml smlOne">Go there</div>
<div id="home" class="sml smlTwo">Go here</div>
<div id="profile" class="sml smlThree">Go somewhere</div>
<!--Burger-->
<div class="burger-menu">
<div id="top" class="bar barTop"></div>
<div id="middle" class="bar barMid"></div>
<div id="bottom" class="bar barBot"></div>
</div>
</div>
</div>
CSS:
.footer
{
position: fixed;
bottom: 0%;
width: 100%;
height: 50px;
background-color: #d36363;
box-shadow: 0px -6px 6px #888888;
z-index: +2;
}
/* Burger menu section */
#navContainer
{
text-align: center;
font-size: 10px;
}
.burger-menu
{
position: relative;
margin: auto;
height: 100%;
width: 50px;
}
.bar
{
height: 6px;
width: 100%;
background-color: white;
}
#top
{
position: relative;
top: 5px;
}
#middle
{
position: relative;
top: 15px;
}
#bottom
{
position: relative;
top: 25px;
}
.barTop, .barMid, .barBot
{
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.barTopOn
{
transform: rotate(45deg) translateY(12px) translateX(11px);
}
.barMidOn
{
opacity: 0;
}
.barBotOn
{
transform: rotate(-45deg) translateY(-12px) translateX(11px);
}
/* Navigation buttons section */
#navContainer
{
position: relative;
margin: auto;
width: 50px;
}
.sml
{
border: 2px solid #58a7dd;
height: 50px;
width: 50px;
border-radius: 50%;
background-color: white;
box-shadow: 6px 6px 6px #888888;
transform: scale(0);
}
#workouts
{
position: absolute;
bottom: 10px;
left: -60px;
}
#home
{
position: absolute;
bottom: 50px;
}
#profile
{
position: absolute;
bottom: 10px;
left: 60px;
}
.smlOnOne
{
animation: pop, slideOne 0.1s ease-in;
animation-fill-mode: forwards;
}
.smlOnTwo
{
animation: pop, slideTwo 0.1s ease-in;
animation-fill-mode: forwards;
}
.smlOnThree
{
animation: pop, slideThree 0.1s ease-in;
animation-fill-mode: forwards;
}
.smlOnOne:hover
{
background-color: red;
border: none;
box-shadow: 6px 10px 18px #686868;
animation: whopL 0.2s;
animation-fill-mode: forwards;
}
.smlOnTwo:hover
{
background-color: red;
border: none;
box-shadow: 6px 10px 18px #686868;
animation: whopC 0.2s;
animation-fill-mode: forwards;
}
.smlOnThree:hover
{
background-color: red;
border: none;
box-shadow: 6px 10px 18px #686868;
animation: whopR 0.2s;
animation-fill-mode: forwards;
}
#keyframes pop
{
100%
{
transform: scale(1,1);
}
}
#keyframes slideOne
{
0%
{
bottom: -20px;
left: 0px;
}
100%
{
bottom: 10px;
left: -60px;
}
}
#keyframes slideTwo
{
0%
{
bottom: -20px;
}
100%
{
bottom: 50px;
}
}
#keyframes slideThree
{
0%
{
bottom: -20px;
left: 0px;
}
100%
{
bottom: 10px;
left: 60px;
}
}
#keyframes whopL
{
0%
{
transform: scale(1,1) translateY(0px) translateX(0px);
}
100%
{
transform: scale(1.5) translateY(-10px) translateX(-10px);
}
}
#keyframes whopC
{
0%
{
transform: scale(1,1) translateY(0px) translateX(0px);
}
100%
{
transform: scale(1.5) translateY(-10px);
}
}
#keyframes whopR
{
0%
{
transform: scale(1,1) translateY(0px) translateX(0px);
}
100%
{
transform: scale(1.5) translateY(-10px) translateX(10px);
}
}
JS/jQuery:
$(".burger-menu").click(function()
{
$(".barTop").toggleClass("barTopOn");
$(".barMid").toggleClass("barMidOn");
$(".barBot").toggleClass("barBotOn");
$(".smlOne").toggleClass("smlOnOne");
$(".smlTwo").toggleClass("smlOnTwo");
$(".smlThree").toggleClass("smlOnThree");
});
Here is a working demo:
https://codepen.io/BGGrieco/pen/NgjxXq

You have an element that is a set of #-webkit-keyframes to animate in. On hamburger-menu click, these keyframes run, and that works well.
Next, you have a second set of #-webkit-keyframes on hover, so on hover works well too.
However, the instant the mouse is away from the element, the first (intro) set of keyframes gets run again. You don't want it to run after it first runs.
Here is what I was able to accomplish:
https://codepen.io/CapySloth/pen/RgxKEb
<div id="workouts" class="sml smlOne">
<div class="test1">
Go there
</div>
</div>
Instead of stacking classes which contain keyframe animations onto the one ".sml" class, I have split the task between two elements. ".sml" now acts as a wrapper which takes care of the "hamburger-menu open" animation and "test1 a" takes care of the "whop" animation.
If you can find a way to hide/show parents of the "test1 a/test2 a/test3 a" then you will have what you want.

You can use .stop() before your .toggleClass.
$("#example").stop().toggleClass("class");

Develop Reference

JavaScript is the programming language of the Web.

prevent effect hover from occurring until previous effect has completed - javascript

Related

STOP the <a and href tags pops up to another page and instead play within the main page

How to condition styling child by hover on parent only?

How to divide in sections in four quadrants + make clicks in collapsable listbox independent of clicks in section

REACT - Child position with respect of scale of parent

Multiple CSS animations: How to avoid re-triggering one of them?

Categories

Resources