Menu
I have two quotes wrapped in H2 tags that I want to fade in and out using jQuery. When the page loads I want the first quote to fade in, delay for a few seconds and fade out then the next quote to do the same. I would like it to continue to loop through the two quotes. Any help would be greatly appreciated.
588
A fade in is an opening shot or transition technique film editors use to ease viewers into new imagery, rather than using a sudden cut from scene to scene.
You can use the same license to install the software on as many personal devices that you own, no matter what desktop platform. Additionally, once you pay for the software, you get free upgrades to any new versions. Fade In's Android and iOS apps cost an additional one-time fee of $4.99.
It lets screenwriters highlight texts, add page breaks, customize fonts, and format scripts based on dialogues, characters, shots, transitions, and more. With Fade In Pro, staff members can insert images, collaborate on tasks in real-time, organize scenes, and customize story elements.
fade-in fade-out in British English (ˌfeɪdˈɪn ˌfeɪdˈaʊt ) cinema. an optical effect in which a shot appears gradually out of darkness and then gradually disappears.
You could do it like this:
CSS:
.quotes {display: none;}
HTML:
<h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>
Javascript:
// code gets installed at the end of the body (after all other HTML)
(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();
Working demo: http://jsfiddle.net/jfriend00/n4mKw/
This code will work for any number of quotes you have, not just two. If you have content after the quotes, you will likely want to fix the size of the container the quotes are in so that it doesn't change size as you go from one quote to the next (causing the other page contents to jump around).
82
This is what you need to get the above script working.
First you need to reference the apropriate JQuery Framework, so add this script tag either in the <head> section, or at the end of the <body> tag, after all other elements:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
Then the main JavaScript MUST go be loaded after the aforementioned <script> tag:
<script type="text/javascript">
(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
