How to Fade In/Out multiple texts using CSS/jQuery like on Droplr?
I know that question is solved, but I thought it might be helpful for someone else so I decided to share xD
I was looking for something more smoother than the sugestion that here was presented, after spend a time looking i made my own solution
Here we will need to think a bit in terms of timeline of an keyframe, in that case the text will only be displayed when the another one has already completed his fade animation
div{ posititon: relative;}.js-nametag{ position: absolute;}.js-nametag:nth-child(1){ animation-name: fade; animation-fill-mode: both; animation-iteration-count: infinite; animation-duration: 5s; animation-direction: alternate-reverse; }
.js-nametag:nth-child(2){ animation-name: fade; animation-fill-mode: both; animation-iteration-count: infinite; animation-duration: 5s; animation-direction: alternate;}
@keyframes fade{ 0%,50% { opacity: 0;} 100%{ opacity: 1; }}
<p class="js-nametag">Leandro de Lima</p> <p class="js-nametag">Game Master</p>
JQuery text fade in fade out
You are appending text rather replacing it. I could figure out a minimal solution to this like below
$(document).ready(function() { var counterText = ["First", "Second", "Third"]; var counter = 0; setInterval(change, 1000); function change() { $('.detailsText').html(counterText[counter]); counter++; if(counter >= counterText.length) { counter = 0; } } })
.quotes {height:45px !important;margin-top:-17.5px;margin-bottom:17.5px;border:1px solid #bec0c2;padding:10px 0px;}
.typeBg{height:44px;top:-10px;position:relative;padding:10px 15px;background-color:#004a65;color:white;width:140px;white-space: nowrap; text-overflow: ellipsis; overflow:hidden;display:inline-block;}
.type{display:none;}.CTA,.details{border:1px solid #bec0c2;padding:10px 2px;top:-11px;position:relative;background-color:white;} .CTA{height:41px !important;width:138px;text-align:right;white-space: nowrap; text-overflow: ellipsis; overflow:hidden;display:inline-block;}.details{height:40px !important; white-space: nowrap; text-overflow: ellipsis; overflow:hidden;width:736px;display:inline-block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><h2 class="quotes"><span class="typeBg"><span class="type">.</span></span> <span class="details"><a href="#"><span class="detailsText">.</span></a></span> <span class="CTA"><a href="#"><span class="CTAText">.</span></a></span></h2>
Using CSS for a fade-in effect on page load
Method 1:
If you are looking for a self-invoking transition then you should use CSS 3 Animations. They aren't supported either, but this is exactly the kind of thing they were made for.
CSS
#test p {
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Demo
- http://jsfiddle.net/SO_AMK/VV2ek/
Browser Support
All modern browsers and Internet Explorer 10 (and later): http://caniuse.com/#feat=css-animation
Method 2:
Alternatively, you can use jQuery (or plain JavaScript; see the third code block) to change the class on load:
jQuery
$("#test p").addClass("load");
CSS
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
#test p.load {
opacity: 1;
}
Plain JavaScript (not in the demo)
document.getElementById("test").children[0].className += " load";
Demo
- http://jsfiddle.net/SO_AMK/a9dnW/
Browser Support
All modern browsers and Internet Explorer 10 (and later): http://caniuse.com/#feat=css-transitions
Method 3:
Or, you can use the method that .Mail uses:
jQuery
$("#test p").delay(1000).animate({ opacity: 1 }, 700);
CSS
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
}
Demo
- http://jsfiddle.net/SO_AMK/a9dnW/3/
Browser Support
jQuery 1.x: All modern browsers and Internet Explorer 6 (and later): http://jquery.com/browser-support/
jQuery 2.x: All modern browsers and Internet Explorer 9 (and later): http://jquery.com/browser-support/
This method is the most cross-compatible as the target browser does not need to support CSS 3 transitions or animations.
Related Topics
How to Override Stylesheets of Primefaces
Font-Weight CSS Transition in Chrome
Small Margin/Gap at the Top of Document
CSS Variables Defaults: Set If Not Already Set
Css: How to Change Colour of Active Navigation Page Menu
Grid Styling - Overwrite Style of Ag-Grid
How to Find Out When I Can Safely Drop Vendor Prefixes for a CSS3 Property
How to Style a Specific Word with CSS in an HTML Element
Object-Fit, Object-Positioning and Absolute Positioning
CSS Different Font Sizes on Different Families
What Is the Most Practical Way to Check for "@Supports" Support Using Only CSS
<A> with an Inner <Span> Not Triggering :Active State in Ie 8
Fit Div Size to Background Image