Fade boxes after each other in - javascript

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

Related

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>

When using #keyframes to fade-out with opacity, how do I repeat the animation with the event?

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>

jQuery .hover doesn't loop

I have a codepen here: http://codepen.io/huwrowlands/pen/GgmjqX
HTML:
<div class="site-branding">
<a href="#">
<img alt="Land" class="site-logo site-logo-land" src="http://website-test-lab.com/sites/landchain/wp-content/themes/landchain/assets/img/land.png" />
</a>
</div>
CSS:
/* Basic Styles */
.site-logo {
visibility: hidden;
max-width: 127px;
margin: 0 auto;
display: block;
}
/* Animation CSS */
.slideRight{
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes slideRight {
0% {
transform: translateX(-150%);
}
50%{
transform: translateX(8%);
}
65%{
transform: translateX(-4%);
}
80%{
transform: translateX(4%);
}
95%{
transform: translateX(-2%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideRight {
0% {
-webkit-transform: translateX(-150%);
}
50%{
-webkit-transform: translateX(8%);
}
65%{
-webkit-transform: translateX(-4%);
}
80%{
-webkit-transform: translateX(4%);
}
95%{
-webkit-transform: translateX(-2%);
}
100% {
-webkit-transform: translateX(0%);
}
}
/**/
.slideRightLeft{
animation-name: slideRightLeft;
-webkit-animation-name: slideRightLeft;
animation-duration: 1s ;
-webkit-animation-duration: 1s;
animation-iteration-count: infinite;
-webkit-iteration-count: infinite;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes slideRightLeft {
0% {
transform: translateX(0%);
}
50% {
transform: translate(-50%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideRightLeft {
0% {
-webkit-transform: translateX(0%);
}
50% {
transform: translate(-50%);
}
100% {
-webkit-transform: translateX(0%);
}
}
JS:
//Animations (Delay)
jQuery(function(){
setTimeout(function(){
jQuery('.site-logo-land').addClass("slideRight");
}, 1000);
});
jQuery( ".site-logo" ).hover(function() {
jQuery( this ).addClass( "slideRightLeft" );
});
On page load, the Land logo animates in by adding a class which is controlled by CSS keyframe animations.
I also have a jQuery snippet to add another class to animate he Land logo on hover.
What I require, is that the hover effect to work each time a user hovers over the Land logo. Currently, it only does this once.
Not sure, if this is something to do with my CSS keyframes animation code, or something I need to fix with my jQuery.
Thanks in advance
jQuery hover function doesn't work like the css :hover class where styles are just applied on hover, and removed after mouseout. You need to remove the class on mouseout again:
jQuery( ".site-logo" ).on('mouseout', function() {
jQuery( this ).removeClass( "slideRightLeft" );
});
You should add the following to the .slideRightLeft class:
-webkit-animation: slideRightLeft 1.3s infinite;
animation: slideRightLeft 1.3s infinite;
Check this link for a working demo.
Edit
You can find the implementation using jQuery's animate() function here. Note the added style to the img.
JS
jQuery( ".site-logo" ).hover(function() {
jQuery( this ).animate({
left: "-=50"
}, 1000)
.animate({
left: "+=50"
}, 1000);
});
I'm writing an answer since I cannot comment cause of my low rep (I need at least 50 to do so). But taking the suggestions from Mario A I resolved the issue of the jump on mouseout.
First of all I made some work on your css. I added a transition: 1s transform to the site-logo class, then I removed the keyframe animation for the .slideRightLeft class and added a simple transform: translate(-50%) since with I wasn't able to make the transition work with the keyframe animation. With these changes the text was sliding to the right on hover and if you took off your mouse at any point it would slide back into the original position, but if you left your mouse over the image it would remain at the -50% position until you took your mouse off. Here are the relevant CSS classes:
.site-logo {
max-width: 127px;
margin: 0 auto;
display: block;
transition: 1s transform;
-webkit-transition: 1s -webkit-transform;
}
.slideRightLeft{
transform: translate(-50%);
-webkit-transform: translate(-50%);
}
To resolve that I added a new setTimeout of 1s to your JS and have it remove the slideRightLeftclass, this way if you leave your mouse over the image it would return to the original position within 1s. Also having seen what Mario A had done with the JS I thought it would be simpler to have it all on the .hover function, hence I change the addClass to toggleClass and added the removeClass for the slideRight class on the hover function. Here's the updated JS:
//Animations (Delay)
jQuery(function(){
setTimeout(function(){
jQuery('.site-logo-land').addClass("slideRight");
}, 1000);
});
jQuery( ".site-logo" ).hover(function() {
var curObj = this;
jQuery( this ).toggleClass( "slideRightLeft" );
setTimeout(function(){
jQuery( curObj ).removeClass( "slideRightLeft" );
}, 1000);
jQuery( this ).removeClass( "slideRight" );
});
You can check it out here: http://codepen.io/anon/pen/PwmJRN
Hope I could help!
EDIT
After publishing this I found a bug on the code where if you leave the mouse until the animation finishes and then move it out the animation fires up again, to resolve this I added the following to the JS:
jQuery( ".site-logo" ).on('mouseout', function(){
jQuery( this ).removeClass( "slideRightLeft" );
});
This solves that issue and everything else working as before.
Why not use css:hover selector. You can do something like this:
.site-logo:hover
{
animation-name: slideRightLeft;
-webkit-animation-name: slideRightLeft;
animation-duration: 1s ;
-webkit-animation-duration: 1s;
animation-iteration-count: infinite;
-webkit-iteration-count: infinite;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}

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

How to blink a div in jquery? [duplicate]

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.

Categories

Resources