How to blink a div in jquery? [duplicate] - javascript

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.

Related

How to flip two emojis indefinitely using css

I have a text with two emojis 🥳🤪
I want to flip one emogi with another using css.
When the first emogi is shown I want to the second emoji to be hidden. So they kinda indefinitely replacing each other.
I found here a great example how to make text blink
.blink {
animation: blinker 1s step-start infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
<div class="blink">🥳</div>
So how would you show the second emogi while the first one is hidden?
You can use a pseudo-element:
.blink::before {
content: "🥳";
animation: blinker 1s linear infinite alternate;
}
#keyframes blinker {
0% {
content: "🥳";
}
50% {
opacity: 0%;
}
100% {
content: "🤪";
}
}
<div class="blink"></div>
.emoji-cont {
position: relative;
}
.blink, .blink-2 {
position: absolute;
}
.blink {
animation: blinker 1s infinite;
}
.blink-2 {
animation: blinker 1s .5s infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
<div class="emoji-cont">
<div class="blink">🥳</div>
<div class="blink-2">🤪</div>
</div>

How can I detect to finish fadeoutAnim and call function?

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>

Hide text as soon as page loads for a specific time then reveal [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have a paragraph that I would like to hide on page load until a period of time has passed. What would be the easiest way to do this? I understand that this'll probably involve js of some form but that's about as much as I can fathom.
You don't need any kind of <form> for this. Just use the following snippet:
$(function () {
$("p").hide().prop("hidden", false);
setTimeout(function () {
$("p").fadeIn(400);
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p hidden>Welcome!</p>
The concept I am using is, load it hidden, programmatically hide it and the reveal after some time.
It just could be done in CSS only:
.toReveal {
opacity: 0;
animation: reveal 400ms 5s forwards;
}
#keyframes reveal {
100% {opacity: 1;}
}
<p class="toReveal">
To reveal
</p>
I have made a js bin where a text is hidden from users for 5 seconds using the setTimeout function.
http://jsbin.com/savoduruha/edit?html,js,output
Here is simple javascript code
function onTimerElapsed() {
var myDiv = document.getElementById('theDiv');
myDiv.style.display = myDiv.style.display === 'none' ? 'block' : 'none';
}
<body onload="setTimeout(onTimerElapsed, 2000);">
<div id="theDiv" style="display:none;">
Text to hide on reload
</div>
</body>
A simple CSS solution would be to use keyframes. (no script library required!)
p {opacity: 0;}
p {
-webkit-animation: show-me-in-5-seconds 2s 1s forwards;
-moz-animation: show-me-in-5-seconds 2s 1s forwards;
-o-animation: show-me-in-5-seconds 2s 1s forwards;
animation: show-me-in-5-seconds 2s 1s forwards;
}
#-webkit-keyframes show-me-in-5-seconds {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes show-me-in-5-seconds {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes show-me-in-5-seconds {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes show-me-in-5-seconds {
0% { opacity: 0; }
100% { opacity: 1; }
}
<p>SHOW ME IN 5 SECONDS</p>

Fade boxes after each other in

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

delayed logo fading into website?

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;
}

Categories

Resources