fadeIn fadeOut to reveal hidden DIVs

JavaScript
1

Hi,

I am currently working on a small project to improve my designing and programming all round.

At the moment I am having a problem implementing some JQuery to allow for text in a DIV to be faded in and out to reveal new DIV’s.

I have some DIVs hidden with css using display:none and I want to use JQuery to constantly loop through fading in and out of these DIV’s to reveal and hide their text.

I have managed to get it to fade from the first DIV to the second but I need to work out how to loop through all of them. I am familiar with loops etc but I am unsure how to implement it to work through only these DIV’s

Thanks in advance for any help.

Here is my code so far:

<div id="drinks">
	
	<h1>Drinks Prices</h1>
	
	<div class="drinks_content">
	
		<h2>Draught Pints</h2>
		
		<ul>
			<li>Becks Vier : £3.40</li>
			<li>Fursternberg : £3.40</li>
			<li>Guinness : £3.40</li>
			<li>Best : £3.20</li>
			<li>Strongbow : £3.20</li>
		</ul>
	
	</div>
	
	<div class="hidden">
		
		<h2>Wines &amp; Spirits</h2>
	
		<ul>
			<li>Vodka + Mix: £1.70</li>
			<li>Whisky + Mix: £1.70</li>
			<li>Rum + Mix: £2.00</li>
			<li>Single Malt Whisky: £2.40</li>
			<li>Small Glass of Wine: £2.00</li>
			<li>Large Glass of Wine: £2.50</li>
		</ul>
			
	</div>
	
	<div class="hidden">
		
		<h2>Bottled Beer</h2>
	
		<ul>
			<li>Miller: £1.70</li>
			<li>Budweiser: £1.70</li>
			<li>Estrella Damm: £2.00</li>
			<li>Becks: £2.40</li>
			<li>Corona: £2.00</li>
			<li>Desperados: £2.50</li>
			<li>Red Stripe: £2.50</li>
			<li class="other">Rekorderlig: £3.20</li>
		</ul>
			
	</div>
	
	<div class="hidden">
		
		<h2>Promo's</h2>
	
		<ul>
			<li class="promo">Estrella Damm: £2.20</li>
		</ul>
			
	</div>
	
	<h2 class="column_footer">ALL Shots £2!</h2>
	
</div><!--Drinks end DIV-->

$(document).ready(function() {

$('.drinks_content').fadeOut(5000, function() {
    $(this).removeClass('drinks_content');
    $(this).addClass('hidden');
    $(this).next().fadeIn(5000).removeClass('hidden').addClass('drinks_content');
});

});
2

Sounds like you’re coding up a “carousel” from scratch, which can be a fun exercise. However, if you want to just implement it and get on with your day, you might try a cycle plugin like jQuery Cycle. That link will take you to the page that shows cycling non-image content.

If you want to code it up yourself, you might write a function to do something like this:


$(".drinks_content").each(function(i) {
  // Do something with the "i"th item
});

You’ll need to detect when you are at the beginning or end, and then fade the appropriate items. You can use a .delay() between fades, or use a JS timer, which is probably more robust.

Also, you can just use .fadeIn() and .fadeOut() to show and hide things respectively, instead of adding and removing classes. You would probably just make .drinks_content hidden from your CSS (display:none) at first, then fade it in.

Hope that points you in the right direction…