I am using jquery and i want to make like toast message.
so, if "show" class append to div, the toast message would be fade in, and after some seconds fade-out.
I have to finished fade-out anim, remove the "show" class.
It is my first code.
var showToast = function(msg) {
clearTimeout(window.timeoutToast);
$("toastDiv p").html(msg);
$("toastDiv").addClass("show");
window.timeoutToast = setTimeout(function() {
$("toastDiv").removeClass("show")
}, 3000);
};
I tried call clearTimeoutFunc, and removeClass show class.
but if I clicked multiple fastly, the toastMessage was fade-out, and show in a blink....
Also I tried $("toastDiv").on("animationed webkitAnimationEnd oAnimationEnd MSAnimationEnd", function() { ... })
but, when the fade-in anim finished, the function was called.
first, my html code
<div class="toastDiv">
<p class="txt_toast">blablabla</p>
</div>
and my css
.toastDiv.show{
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
please fix my code...
Edited for JS only solution:
var showToast = function(msg) {
clearTimeout(window.timeoutToast);
$(".toastDiv p").html(msg);
$(".toastDiv").addClass("show");
$(".toastDiv").on('animationend', function(event) {
var animation = event.originalEvent.animationName;
if (animation === 'fadeout') {
$(".toastDiv").removeClass("show");
}
});
};
showToast('I am toasted!');
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.toastDiv {
visibility: hidden;
}
.toastDiv.show{
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toastDiv">
<p class="txt_toast">blablabla</p>
</div>
Related
I'm trying to make a block of text (h4) become visible after a delay when the page loads.
Do I need to use setTimeout?
I think what you need is to set some css animation:
h4 {
animation: 1s fadeIn;
animation-fill-mode: forwards;
visibility: hidden;
}
#keyframes fadeIn {
99% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
With pure JS and setTimeout this could be one solution.
window.onload = event => {
console.log("page is fully loaded");
setTimeout(function() {
document.getElementById("delayed-3s").style.visibility = "visible";
}, 3000);
};
<h4 id="delayed-3s" style="visibility:hidden;">I am some h4 text</h4>
I am making a label pop up for the user, if the user tries to drag and drop an element that has already been dragged.
Problem is, that the animations only happens once, and at the end of the animation, it will have an opacity of 0 forever.
CSS
#keyframes smooth {
0% { opacity: 1;}
100% { opacity: 0;}
}
.o_tip{
position: absolute;
z-index: 999;
display: none;
opacity: 0;
-webkit-animation: smooth 2s ease-in;
-moz-animation: smooth 2s ease-in;
-o-animation: smooth 2s ease-in;
-ms-animation: smooth 2s ease-in;
animation: smooth 2s ease-in;
}
To illustrate my problem, if I 'end' the animation on opacity: 0.2 instead of opacity: 0:
#keyframes smooth {
0% { opacity: 1;}
100% { opacity: 0.2;}
}
... then the label will reappear for each event - but it will not fade out again, which I want to do.
You can put the animation rule in a specific css class rule, and then on clicking add that class again. Just keep these points in mind:
You need to remove the animation class first before adding it again to have any effect.
Even if you follow first point, removing the class and adding it back right then won't have any visual effect. To trigger reflow, you can use this statement: void targetDiv.offsetWidth;.
document.querySelector("#start-animation").onclick = function(e){
var targetDiv = document.querySelector("#mydiv");
targetDiv.className = "";
void targetDiv.offsetWidth; // this triggers UI reflow
targetDiv.classList.add("o_tip");
}//onclick
#keyframes smooth {
0% { opacity: 1;}
100% { opacity: 0;}
}
.o_tip{
z-index: 999;
animation: smooth 2s ease-in forwards;
}
#mydiv{
background-color: yellow;
height: 50px;
width: 100px;
}
#mydiv.o_top{
display: block;
}
<div id="mydiv"></div>
<button id="start-animation">Start animation</button>
I want to fade in all boxes at my site . But not like it works already. I want that first the last box fades in and then is moving down by the info box etc. so the boxes appears after each other.
The fadein effect is currently made with:
.content {
-webkit-animation: fadein 3s;
-moz-animation: fadein 3s;
-ms-animation: fadein 3s;
-o-animation: fadein 3s;
animation: fadein 3s;
background: rgba(49,54,59,0.8);
*zoom: 1;
}
#keyframes fadein {
0% { opacity: 0; }
75% { opacity: 0.3; }
100% { opacity: 1; }
}
#-moz-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-webkit-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
It is possible to use jQuery, JavaScript and Css.
I hope you'll ahve a solution.
The jQuery fadeIn function (and most animations) has a "complete" option. You can pass another animation call to it and chain them in order to achieve the proper order.
For instance, you can do:
$( "#box1" ).fadeIn( "slow", function() {
// Animation complete
$( "#box2" ).fadeIn( "slow", function() {
// Animation complete
});
});
You can use animation-delay to delay the animations so the boxes fade one after another.
div {
/* Will cause animation to start after 2 second delay */
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
Best solution:
<script type="text/javascript">
$(document).ready(function() {
$(".content:hidden:last").delay(500).slideDown(1000, function() {
$(".content:hidden:last").delay(500).slideDown(1000, function() {
$(".content:hidden:last").delay(500).slideDown(1000, function() {
//nothing
});
});
});
});
</script>
For fading just replace slideDown with fadeIn
You can do this with just css using something like stagger.css
http://digitalfio.github.io/Stagger.css/
Include the css file in your <head>, apply the animation classes to each div then add a timing class to each div in the form of an underscore followed by an incrementing number - e.g.
<div class="animated slideIn _1"></div>
<div class="animated slideIn _2"></div>
<div class="animated slideIn _3"></div>
<div class="animated slideIn _4"></div>
so you get something like this: http://output.jsbin.com/cusuz/4
Just wondering whats the best way to go about having the logo in top left corner to fade in after about 5 seconds after user has been on page?
Here is the http://jsfiddle.net/elroyz/sjD8X/ with the logo in the corner
body {
background-color:#000;}
i only put this in because it wouldnt let me post without code
i read something about jquery delay but i know next to nothing about it so thought there might be another option
Thanks in advance
$('img').delay(5000).fadeOut(250);
This will fade out the img after 5 seconds. The time in the code is in ms.
Fore more info on this see
api.jquery.com/delay/
api.jquery.com/fadeout/
api.jquery.com/fadein/
try to use this transitions.
http://www.problogdesign.com/coding/get-started-with-css3-transitions-today/
goodluck!
HTML
<img onload="this.style.opacity='1';" src="image path" />
CSS
img {opacity:0;-moz-transition: opacity 2s;-webkit-transition: opacity 2s;-o-transition: opacity 2s;transition: opacity 2s;}
CSS 3 animation. (With vendor prefixes because it is still new and experimental):
#-webkit-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
#logo {
-webkit-animation: fadein 5s infinite;
-moz-animation: fadein 5s infinite;
-o-animation: fadein 5s infinite;
animation: fadein 5s infinite;
}
This question already has an answer here:
Closed 12 years ago.
Possible Duplicate:
Blink an div with jquery
I need to know how to make blink of div in jquery?
html
<div class="blink">blinking text</div>
jquery
function blink(selector){
$(selector).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blink(this);
});
});
}
blink('.blink');
demo :
function blink(selector) {
$(selector).fadeOut('slow', function() {
$(this).fadeIn('slow', function() {
blink(this);
});
});
}
blink('.blink');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="blink">blinking text</div>
non-blinking
<div class="blink">more blinking text</div>
Update (bringing the answer up-to-date)
You do not need to use jQuery for such effects anymore. You can do it with just CSS (using CSS animations).
(compatibility table at http://caniuse.com/#feat=css-animation)
CSS (using the standard properties)
.blink{
animation:blink 700ms infinite alternate;
}
#keyframes blink {
from { opacity:1; }
to { opacity:0; }
};
Demo (with vendor prefixed properties) :
.blink {
-webkit-animation: blink 700ms infinite alternate;
-moz-animation: blink 700ms infinite alternate;
-o-animation: blink 700ms infinite alternate;
animation: blink 700ms infinite alternate;
}
#-webkit-keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#-o-keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#-moz-keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
;
<div class="blink">blinking text</div>
non-blinking
<div class="blink">more blinking text</div>
Assuming your div has id="blinkMe"
setInterval(function () {
var vis = $("#blinkMe").css("visibility");
vis = (!vis || vis == "visible") ? "hidden" : "visible";
$("#blinkMe").css("visibility", vis);
}, 500);
Note: used "visibility" and not "display" / .toggle() since the latter will cause layout to shift around while the div is blinking.