When I click a certain element, I would like to see a confirm appear and fade out. I have achieved this with the below code, but I am not 100% happy, because it cannot be used quickly twice in a row. I need to wait for the text to disappear (and reappear while hidden) before clicking again. There must be a better way to do this kind of magic.
Here is what I did:
$(".hello").click(function() {
var element = $(".conf");
blink(element);
setTimeout(function() {
reset(element);
}, 2000);
});
function blink(element, callback) {
element.css('visibility', 'visible');
element.css('opacity', '0');
}
function reset(element) {
element.css('visibility', 'hidden');
element.css('opacity', '1');
}
.hello {
visibility: visible;
transition: opacity 1s;
}
.conf {
visibility: hidden;
opacity: 1;
border-radius: 5px;
background-color: lime;
color: black;
transition: opacity 1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="hello">hello</span>
<span class="conf">confirmation</span>
To fix the issue you can hide the element using display: none, then show() it on click and immediately fade it out. If you also call stop() on each event you will stop the fadeOut() animation and set the element back to a fully visible state. Try this:
$(".hello").click(function() {
$(".conf").stop(true, true).show().fadeOut(1000);
});
.hello {
visibility: visible;
transition: opacity 1s;
}
.conf {
display: none;
border-radius: 5px;
background-color: lime;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="hello">hello</span>
<span class="conf">confirmation</span>
Related
I want a top banner to ease in as soon as the website is loaded. I use JQuery to do that task, but the show() function doesn't work as expected.
$(document).ready(function() {
$('#job').show(2000, function() {
$('#cross').click(function() {
$('#job').hide();
});
});
});
.job-banner {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
background-color: #333;
display: none;
}
.job-banner:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="job" class="job-banner">
<p>...</p>
</div>
But that just shows up the div instantly without any animation and the code that should execute after the animation doesn't work as well. I tried to put an alert inside the code block that should execute after the .show() but nothing.
Is there another way of achieving that or did I do something wrong?
#Sergej Thanks, that did the trick. I just needed to also declare opacity and now I have a css transition instead which is called by JQuery.
So for the CSS:
job-banner {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
background-color: #333;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
.visible {
visibility: visible;
opacity: 1;
}
And JS:
$(document).ready(function() {
$('#job').addClass('visible');
});
Naturally, we can create a CSS animation using keyframes, and control it from there.
However, ideally, I would like to trigger this animation from a button click - so the button click would be an event...
#keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}
Now, on click, I want to trigger this animation; as opposed to from within the CSS animation property.
see here jsfiddle
if you want your animation to work every time you press the button use this code :
$('button').click(function() {
$(".fademe").addClass('animated');
setTimeout(function() {
$(".fademe").removeClass('animated');
}, 1500);
});
where 1500 is the animation-duration in this case, 1.5s
$('button').click(function() {
$(".fademe").addClass('animated');
setTimeout(function() {
$(".fademe").removeClass('animated');
}, 1500);
});
.fademe {
width: 100px;
height: 100px;
background: red;
}
.fademe.animated {
animation: fade-in 1.5s ease;
}
#keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fademe">
</div>
<button>CLICK ME</button>
EXPLANATION :
on click on the button add class animated ( or any other class ) to the element you want to apply the animation to , .fademe
make a setTimeout(function() to delay the removeClass for the duration of the animation 1.5s or 1500ms
write in CSS the declaration of the animation , #keyframes, and add it to the element with the class added by the JQ .fademe.animated
$("#move-button").on("click", function(){
$("#ship").removeClass("moving");
$("#ship")[0].offsetWidth = $("#ship")[0].offsetWidth;
$("#ship").addClass("moving");
});//
#ship
{
background: green;
color: #fff;
height: 60px;
line-height: 60px;
text-align: center;
width: 100px;
}
#move-button
{
margin-top: 20px;
}
#ship.moving
{
animation: moving 2s ease;
}
#keyframes moving
{
0%{ transform: translate(0px);}
50%{ transform: translate(20px);}
100%{ transform: translate(0px);}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ship">Ship</div>
<button id="move-button">Push</button>
If you want to make the animation happen and always end before allowing the event listener to trigger it again, I would suggest to control the behaviour like this:
// Add this to your event listener
if (!element.classList.contains("myClass")) {
element.className = "myClass";
setTimeout(function() {
element.classList.remove("myClass");
}, 1000); //At least the time the animation lasts
}
There is a toggle method that works just fine for this, hope it helps:
function Fade() {
document.getElementById("box").classList.toggle("animate");
}
#box {
background-color: black;
height: 50px;
width: 50px;
}
.animate {
animation: fademe 0.5s;
}
#keyframes fademe {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<html>
<head>
<title>
Animation Trigger
</title>
</head>
<body>
<div id="box"></div>
<button onclick="Fade()"> Fade above Box</button>
</body>
For some reason when I add the second click function it stops working completely. I was wondering if anybody could help pin point what the issue might be?
What I'm trying to do:
The default state is "day" and when "night" is clicked, it removes the day class and adds the night class. Which changes the background image. Which works... Sort of. However, when I add the function for the day button to add the day class and remove the night class is breaks and doesn't work.
Here's a fiddle of what I have: http://jsfiddle.net/790hqykq/3/
$(document).ready(function () {
$('.night').click(function () {
$('#room').addClass('night');
$('#room').removeClass('day');
});
$('.day').click(function () {
$('#room').addClass('day');
$('#room').removeClass('night');
});
});
Thanks!!
Edit: Also - Is there any way to fade this class change? Similar to fadeIn/fadeOut? Thanks!
jsFiddle Demo
The problem with your fiddle is that the #room element has the class day. So does the anchor element. When the event handler is setup
$('.day').click(function () {
It is also assigned to the room element, and as a result of that, #room ends up also having the event handler attached to it. This causes day to always be selected as the element's class, even when night is clicked.
You should consider changing the class name to something like daycolor and nightcolor
<div id="room" class="daycolor">
and
#room.daycolor {
background: #00CCFF;
}
The element with ID room has the class day, as one of the elements within it.
When you attach the handler, it's being attached to both elements.
This should solve your problem:
$(document).ready(function () {
$('.timeButton.day').click(function () {
$('#room').addClass('day').removeClass('night');
});
$('.timeButton.night').click(function () {
$('#room').addClass('night').removeClass('day');
});
});
As per your complement about fading, you can use CSS 3 to achieve this:
#room {
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}
Demo
Change the classnames on your children elements and use that selector for your events.
jsFiddle
HTML:
<div id="container">
<div id="room" class="day">
<a class="timeButton day1">Day</a>
<a class="timeButton night1">Night</a>
</div>
</div>
JS:
$(document).ready(function () {
$('.night1').click(function () {
$('#room').addClass('night');
$('#room').removeClass('day');
});
$('.day1').click(function () {
$('#room').addClass('day');
$('#room').removeClass('night');
});
});
Style:
#container {
width: 300px;
margin: 0 auto;
}
#container a, #container div {
float: left;
display: block;
}
#room {
width: 300px;
height: 200px;
position: relative;
}
#room.day {
background: #00CCFF;
}
#room.night {
background: #0000CC;
}
#room .day1 {
left: 30px;
border: 1px solid black;
}
#room .night1 {
right: 30px;
border: 1px solid black;
}
#room .timeButton {
position: absolute;
width: 80px;
height: 25px;
top: 30px;
cursor: pointer;
text-align: center;
}
#room .timeButton:hover {
background: #fff;
}
Here is another solution, where I just change the css-style via jquery.
Javascript:
$(document).ready(function () {
$('.day').click(function () {
$('#room').css("background-color", "#00CCFF");
});
$('.night').click(function () {
$('#room').css("background-color", "#0000CC");
});
});
Also you need to add a background-color to #room:
background: #00CCFF;
Fiddle:
http://jsfiddle.net/790hqykq/7/
In your script, you reference to ".night" instead ".nightButton".
$('.nightButton').click(function () {
$('#room').addClass('night');
$('#room').removeClass('day');
});
$('.dayButton').click(function () {
$('#room').addClass('day');
$('#room').removeClass('night');
});
To achieve the transition, you can add this CSS propertie to #room.
-webkit-transition: background 2s; /* For Safari 3.1 to 6.0 */
transition: background 2s;
http://jsfiddle.net/790hqykq/13/
you can add css3 for the transitions from day to night.
it wont working in older IE browsers 9 and under but is excellent in all modern browsers.
browser support. You can use this generator to make the code faster.
#room {
width: 300px;
height: 200px;
position: relative;
-webkit-transition: background 1000ms ease-in-out;
-moz-transition: background 1000ms ease-in-out;
-ms-transition: background 1000ms ease-in-out;
-o-transition: background 1000ms ease-in-out;
transition: background 1000ms ease-in-out;
}
Demo jsfiddle
Given an element that has a CSS animation that changes opacity, why does the animation get rerun when the display property changes? How do I stop this from happening?
Example code:
HTML
<div class="foo"></div>
CSS
#-webkit-keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
.foo {
background-color: red;
width: 200px;
height: 200px;
-webkit-animation: fade-in 600ms forwards 0ms ease;
}
.hidden {
display: none;
}
JS
$(function () {
$(".btn").click(function (e) {
e.preventDefault();
$(".foo").toggleClass("hidden")
})
})
JSFiddle
The behavior I am expecting to see is that the animation runs when the DOM renders, but does not rerun when the display property is changed.
One way to do it is to add a class when the button gets clicked that overwrites the animation property.
FIDDLE
$(function () {
$(".btn").click(function (e) {
e.preventDefault();
$(".foo").addClass('finished').toggleClass("hidden")
})
})
.foo.finished {
-webkit-animation: none;
}
Another option would be to hide it with position: relative instead of changing display:
FIDDLE
.hidden {
position: absolute;
left: -99999px;
}
Curious. It seems that Chrome is acting as if changing from display: none to block was the same as adding the element to the DOM. I tried it in Firefox (jsfiddle), and it works as one would expect. IE, however, does the same as Chrome. One could think that Firefox's behaviour is the correct, but, thinking about it, display: none is like taking the node form the layout and rendering trees, so, if the page loads with the object with display: none, and then it changes to block, I would expect to see the animation.
#keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
.foo {
background-color: red;
width: 200px;
height: 200px;
animation: fade-in 3000ms forwards 0ms ease;
}
.hidden {
display: none;
}
this is how you can do that.. its a bit hacky but you can remove that class and add another class that doesn't have the animation. $("#my_foo").removeClass("foo").addClass("your_foo");
http://jsfiddle.net/s68yf/6/
I want to create a delay upon losing focus of a textarea. Currently I have:
<textarea name="description"></textarea>
My CSS reads
.my-form textarea {
height: 35px;
}
.my-form textarea:focus {
min-height: 100px;
}
There is a radio button toggle right beneath this. It gets pushed down because of the extra pixels added on focus, but when trying to click on a button it loses its focus, the height goes back to the original, and you miss the click.
Is there a way to create a delay when losing focus for say 100 ms, just enough to register the click on the buttons?
Using CSS
.my-form textarea {
height: 35px;
transition: height 0.3s ease 1s;
}
.my-form textarea:focus {
min-height: 100px;
}
Using JQUERY
$(document).ready(function () {
$('.my-form textarea').focusin(function () {
$(this).css('height', '100px');
});
$('.my-form textarea').focusout(function () {
setTimeout(function () { $('.my-form textarea').css('height', '35px'); }, 500);
});
});
you can try css3 transition
.my-form textarea {
height: 35px;
transition: width ease 0.3s 0.5s;
}
.my-form textarea:focus {
min-height: 100px;
}
Here is an example: http://jsfiddle.net/689gv/1/