I am new using javascript and CSS and am currently trying to make a small animation that is triggered at event call. The animation is simple, and only changes the transparancy of an image. My problem is that that the animation only works every other time the function is called.
A function called "pulse()" is called every time I want the animation to happen.
<script>
function pulse() {
$('.transform').toggleClass('transform-active');
}
</script>
The CSS looks like this:
.lock-image {
}
.transform {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.transform-active {
/*animation-delay: 2s;*/
animation-iteration-count: 1;
animation: pulse 0.5s;
animation-direction: alternate;
}
#keyframes pulse {
0% {
opacity: 1;
}
50%{
opacity: 0.3;
}
100% {
opacity: 1;
}
}
The image on which the animation is done is done like this;
<div class="lock-image transform">
<img id="myImage" src="pic_locked.png" class="img-responsive " style="display:inline" alt="Lock" width="100" height="80">
</div>
How can I change the code so the animation happens every time the function pulse() is called?
You can add an event handler to handle when the animation ends to remove the class. For the purpose of the example, I've changed the image to a red div
function pulse() {
$('.transform').addClass('transform-active');
}
$('.transform').on('webkitAnimationEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
$(this).removeClass('transform-active');
})
#myImage {
display: block;
background-color: red;
width: 100px;
height: 80px;
}
.transform {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.transform-active {
/*animation-delay: 2s;*/
animation-iteration-count: 1;
animation: pulse 0.5s;
animation-direction: alternate;
}
#keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lock-image transform">
<div id="myImage"></div>
</div>
<br/>
<button type="button" onclick="pulse()">Pulse</button>
Related
Update
Adding a delay solved my problem:
setTimeout(() => price.classList.add("fade-it"), 100);
but this answer also worked for me
Original question
I have a fade-in effect on background color that should be repeated from time to time initiated by me.
I'm using pure CSS:
<style>
#-webkit-keyframes yellow-fade {
from {
background: #f96;
}
to {
background: #fff;
}
}
#-moz-keyframes yellow-fade {
from {
background: #f96;
}
to {
background: #fff;
}
}
#keyframes yellow-fade {
from {
background: #f96;
}
to {
background: #fff;
}
}
.fade-it {
-webkit-animation: yellow-fade 1s ease-in-out 0s;
-moz-animation: yellow-fade 1s ease-in-out 0s;
-o-animation: yellow-fade 1s ease-in-out 0s;
animation: yellow-fade 1s ease-in-out 0s;
}
</style>
How do I restart this effect after it's already played once?
The code I have is not working after the first time:
var price = document.getElementById("price");
if (price.classList.contains("fade-it")) {
price.classList.remove("fade-it");
}
price.classList.add("fade-it");
You can accomplish this by removing the node from the DOM then adding it back. The append function does exactly that, just append the element to it's parentNode. Give the element it's own wrapper to be the parentNode that way it will not be reordered with other sibling-elements.
const price = document.getElementById("price");
const btn = document.getElementById("fade-price");
const fade = function() {
if (price.classList.contains("fade-it")) {
price.classList.remove("fade-it");
}
price.classList.add("fade-it");
}
document.addEventListener("DOMContentLoaded", function() {
fade()
});
btn.addEventListener("click", function() {
price.parentElement.append(price)
});
#-webkit-keyframes yellow-fade {
from {
background: #f96;
}
to {
background: #fff;
}
}
#-moz-keyframes yellow-fade {
from {
background: #f96;
}
to {
background: #fff;
}
}
#keyframes yellow-fade {
from {
background: #f96;
}
to {
background: #fff;
}
}
.fade-it {
-webkit-animation: yellow-fade 1s ease-in-out 0s;
-moz-animation: yellow-fade 1s ease-in-out 0s;
-o-animation: yellow-fade 1s ease-in-out 0s;
animation: yellow-fade 1s ease-in-out 0s;
}
<div>
<h4 id="price">$9.99</h4>
</div>
<button id="fade-price">
fade
</button>
I'm trying to animate the navigation overlay to come in from the right (which is working perfectly!), but it's not working when I try to reverse the process. I'm wondering why. Please review the code below and see if you can help me.
HTML
<nav class="nav-element">
<h1>header</h1>
<figure class="nav-img">
<img src="images/svg/menu.svg" alt="Hamburger Menu" id="nav-open">
</figure>
</nav>
<section id="overlay" class="overlay">
<header>
<h1>Header</h1>
<figure class="nav-img">
<img src="images/svg/menu-close.svg" alt="Close Menu" id="nav-close">
</figure>
</header>
<ul>
<li class="nav-button">item 1</li>
<li class="nav-button">item 2</li>
<li class="nav-button">item 3</li>
<li class="nav-button">item 4</li>
</ul>
</section>
SCSS
.show-menu {
display: block;
animation: slide-menu 0.5s ease-in forwards;
header {
animation: show-x 1s 0.5s forwards;
}
li:nth-of-type(1) {
animation: item-1 0.5s 0.5s linear forwards;
}
li:nth-of-type(2) {
animation: item-1 0.5s 0.7s linear forwards;
}
li:nth-of-type(3) {
animation: item-1 0.5s 0.9s linear forwards;
}
li:nth-of-type(4) {
animation: item-1 0.5s 1.1s linear forwards;
}
}
.hide-menu {
display: block;
animation: slide-menu 0.5s 1.1s ease-in forwards;
header {
animation: hide-x 1s 0.5s forwards;
}
li:nth-of-type(1) {
animation: item-hide 0.5s linear forwards;
}
li:nth-of-type(2) {
animation: item-hide 0.5s 0.9s linear forwards;
}
li:nth-of-type(3) {
animation: item-hide 0.5s 0.7s linear forwards;
}
li:nth-of-type(4) {
animation: item-hide 0.5s 0.5s linear forwards;
}
}
#keyframes slide-menu {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
#keyframes show-x {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes item-1 {
from {
transform: translateX(10%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
#keyframes hide-menu {
from {
transform: scaleX(1);
}
to {
transform: scaleX(0);
}
}
#keyframes hide-x {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes item-hide {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(10%);
opacity: 0;
}
}
Javascript
const overlay = document.getElementById('overlay');
document.getElementById('nav-open').addEventListener('click', function() {
overlay.classList.add('show-menu');
})
document.getElementById('nav-close').addEventListener('click', function() {
overlay.classList.add('hide-menu');
overlay.classList.remove('show-menu');
})
Can anyone help me why the animation isn't "reversed" and the menu closes the same way it opens?
So first the items move on the X-axis and disappear, then the header content fades, and lastly the overlay moves from the X-axis and disappears.
Try this CSS for the .hide-menu, Adding the reverse property will reverse the animation when clicking the hide button:
.hide-menu {
display: block;
animation: slide-menu 0.5s 1.1s ease-in reverse;
header {
animation: hide-x 1s 0.5s reverse;
}
li:nth-of-type(1) {
animation: item-hide 0.5s linear reverse;
}
li:nth-of-type(2) {
animation: item-hide 0.5s 0.9s linear reverse;
}
li:nth-of-type(3) {
animation: item-hide 0.5s 0.7s linear reverse;
}
li:nth-of-type(4) {
animation: item-hide 0.5s 0.5s linear reverse;
}
}
Heres a JSFiddle Example
I am trying to develop an Image slider. I want the images to zoom in until the next image takeover occurs. I am currently using the transform scale property. It is overflowing the width and causes a scrollbar to be displayed. How can this scrollbar be removed?
HTML:
<div id="pn-head">
</div>
JS:
var i = 1;
function tSlide(){
if(i<=5){
jQuery('#pyn-head').attr('class','pn-head head-bg'+i);
}
i = i+1;
if(i==6){
i=1;
}
}
tSlide();
setInterval(tSlide , 5000);
CSS:
.pn-head{
height: 700px;
background-size: cover !important;
background-repeat: no-repeat !important;
-webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out;
-webkit-transition: transform 2s ease-out 1s;
-moz-transition: transform 2s ease-out 1s;
-o-transition: transform 2s ease-out 1s;
transition: transform 2s ease-out 1s;
}
.head-bg1{
background: url('../img/b1.png');
transform: scale(1.1);
}
.head-bg2{
background: url('../img/b2.png');
transform: scale(1.2);
}
.head-bg3{
background: url('../img/b3.png');
transform: scale(1.3);
}
.head-bg4{
background: url('../img/b4.png');
transform: scale(1.4);
}
.head-bg5{
background: url('../img/b5.png');
transform: scale(1.5);
}
Add this to remove all scrollbars:
<style type="text/css">
body {
overflow:hidden;
}
</style>
I have 3 spans wrapped in a div. When a user hovers over the dive, I want each span to move slightly to the right, with a delay of .5s between each.
Here is my current code:
$('.library_vid').mouseover(function(){
$(this).find('.lesson_meta span:nth-child(1)').css('margin-right', '30px');
setTimeout(function () {
$(this).find('.lesson_meta span:nth-child(2)').css('margin-right', '30px');
}, 500);
setTimeout(function () {
$(this).find('.lesson_meta span:nth-child(3)').css('margin-right', '30px');
}, 1000);
})
However, currently this just moves the first span, the delay never amounts to anything
$('.library_vid').mouseover(function() {
var parent = $(this)
parent.find('.lesson_meta span:nth-child(1)').css('margin-left', '30px');
setTimeout(function() {
parent.find('.lesson_meta span:nth-child(2)').css('margin-left', '30px');
}, 500);
setTimeout(function() {
parent.find('.lesson_meta span:nth-child(3)').css('margin-left', '30px');
}, 1000);
})
div {
width: 130px;
height: 300px;
}
span {
height: 100px;
width: 100px;
display: inline-block;
}
.span1 {
background-color: green;
}
.span2 {
background-color: blue;
}
.span3 {
background-color: purple;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="library_vid">
<div class="lesson_meta">
<span class="span1"></span>
<span class="span2"></span>
<span class="span3"></span>
</div>
</div>
I think the issue was the $(this) nested within your set timeouts. Declaring it as a variable is a common 'cheat'. Also, you said you wanted to move them to the right, but were adding margin on the right
jquery animate Jquery Animate would help out instead of using setTimeout , you can set the time interval or use the default timing intervals ,like the one below slow
// Add your javascript here
$(function(){
$('.library_vid').mouseover(function(){
$(this).find(".lesson_meta").animate({
"margin-right": "30px"
},"slow");
});
});
h1 {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="library_vid">
<span class="lesson_meta">span 1</span>
<span class="lesson_meta">span 2</span>
<span class="lesson_meta">span 3</span>
</div>
you can probably do this with css if that makes it easier for you.
.library_vid:hover .lesson_meta span:nth-child(1) {
margin-right: 30px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.library_vid:hover .lesson_meta span:nth-child(2) {
margin-right: 30px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.library_vid:hover .lesson_meta span:nth-child(3) {
margin-right: 30px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
here is the jsfiddle link
https://jsfiddle.net/jpju2my1/
i dont know how your html is formatted so i just made some stuff up based on what you were describing
On keypress enter, I want to add a red color that immediately fades back out to create a blink effect.
I tried adding a new class on KeyPress that would transition the opacity to 0:
function enterpressalert(e, text) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
document.getElementById('body').className = "show";
}
}
#body {
background-color: rgb(175, 30, 30);
opacity: .25;
transition: opacity 0.4s ease-in;
-ms-transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-webkit-transition: opacity 0.4s ease-in;
}
#body.show {
opacity: 0;
transition: opacity 0.4s ease-out;
-ms-transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
-webkit-transition: opacity 0.4s ease-out;
}
<body id="body" onKeyPress="enterpressalert(event, this)></body>
Here :
function enterpressalert(event, text) {
var code = event.keyCode || event.which;
if (code == 13) {
document.getElementById('body').style.animationName = "alert";
setTimeout(function() {
document.getElementById('body').id = "bodyB";
setTimeout(function() {
document.getElementById('bodyB').id = "body";
document.getElementById('body').style.animationName = "nothing";
}, 4000);
}, 100);
}
}
#body {
background-color: rgb(175, 30, 30);
opacity: .25;
animation-name: nothing;
animation-duration: 0.1s;
}
#bodyB {
background-color: yellow;
opacity: .25;
animation-name: phase2;
animation-duration: 4s;
}
#keyframes alert {
from {background-color: yellow}
to {background-color: rgb(175, 30, 30);;}
}
#keyframes phase2 {
from {background-color: yellow;}
to {background-color: rgb(175, 30, 30);}
}
<body id="body" onkeypress="enterpressalert(event, 'TEXT?')">
</body>
You can blink color like following way. No need to use opacity use background-color: rgba(
body.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == 13) {
document.getElementById('body').className = "show";
var myVar = setInterval(function(){ document.getElementById('body').className = ""; clearInterval(myVar);}, 500);
}
}
#body {
background-color: rgba(175, 30, 30,1);
opacity: 1;
transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-webkit-transition: all 0.4s ease-in;
}
#body.show {
background-color: rgba(175, 30, 30,0);
transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
}
<body id="body" >
</body>