[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Adding a fadeOut to tabs

Posted on 2013-05-15
10
Medium Priority
?
123 Views
Last Modified: 2013-11-28
I'd like to add a fadeout to the tabs on my page here, if someone could help with the javascript side?

Here's the html:

      
<ul class="tabs clearfix">
		<li class="aboutustab active" style="border-left:1px solid #ccc;"><div class="up"></div>About</li>
		<li class="maptab"><div class="up"></div>Map</li>
        <li class="featurestab"><div class="up"></div>Features</li>
		<li class="voucherstab"><div class="up"></div>Offers</li>
	</ul>

Open in new window


And the here's the javascript:

$(window).load(function(){
	
	$('.tab:not(.aboutus)').hide();
	
	$('.tabs li').click(function(){
		var thisAd = $(this).parent().parent();
		$(thisAd).children('.tab').hide();
		$(thisAd).children('.'+$(this).attr('class').replace('tab','')).show();
		$('.tabs li').removeClass('active');												 	
		$(this).addClass('active');
	});

	
	if(window.location.hash) {
		if (window.location.hash == "#map") {
			$(".Advert").children('.tab').hide();
			$(".Advert").children('.map').show();
			$('.tabs li').removeClass('active');												 	
			$('.maptab').addClass('active');
		}
		if (window.location.hash == "#voucher") {
			$(".Advert").children('.tab').hide();
			$(".Advert").children('.vouchers').show();
		}
	}	
	
});

Open in new window

0
Comment
Question by:UName10
  • 5
  • 5
10 Comments
 
LVL 6

Expert Comment

by:APoPhySpt
ID: 39168729
if you want to give the fadeIn and faceOut effect to a hide / show in javascript, you only need pass an integer number, expressed in milisecconds to the hide / show function. Like

$("somediv").show(400);

Open in new window

0
 
LVL 6

Expert Comment

by:APoPhySpt
ID: 39168738
or if you only want a 'roll effect' try  :

$("p").slideUp(600);

Open in new window

and
$("p").slideDown(600);

Open in new window


example: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_slideup_slidedown
0
 

Author Comment

by:UName10
ID: 39168838
Hi, thank you both for answering and I'd like to try the slide effect too.

Could you please show me where I need to add the fade/slide effect to all tabs in the code I posted?

I.e. could you incorporate into my code what I need to add exactly to make all tabs have a fadeout transition? That would really help.

Many thanks
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
LVL 6

Expert Comment

by:APoPhySpt
ID: 39168861
it depents on where you want get the effect, but I'd say in every .show() and .hide()

eg:
$('.tab:not(.aboutus)').hide(500);
.
.
.
$(thisAd).children('.tab').hide(500);
.
.
.

Open in new window


hide(500) is the same as saying: this control will hide and the effect will take 500miliseconds;    
- 1000miliseconds = 1 second
0
 

Author Comment

by:UName10
ID: 39168872
This is the updated effect and this is what I'd like it to be on this page here.

This is the current code:

$(window).load(function(){
	
	$('.tab:not(.aboutus)').fadeOut();

	
	$('.tabs li').click(function(){
		var thisAd = $(this).parent().parent();
		$(thisAd).children('.tab').fadeOut();
		$(thisAd).children('.'+$(this).attr('class').replace('tab','')).fadeIn();
		$('.tabs li').removeClass('active');												 	
		$(this).addClass('active');
	});

                newContent.hide();
                currentContent.fadeOut(10, function() {
                    newContent.fadeIn(100);
                    currentContent.removeClass('current-content');
                    newContent.addClass('current-content');
                });

	if(window.location.hash) {
		if (window.location.hash == "#map") {
			$(".Advert").children('.tab').fadeOut();
			$(".Advert").children('.map').fadeIn();
			$('.tabs li').removeClass('active');												 	
			$('.maptab').addClass('active');
		}
		if (window.location.hash == "#voucher") {
			$(".Advert").children('.tab').fadeOut();
			$(".Advert").children('.vouchers').fadeIn();
		}
	}	
	
});

Open in new window


The fade effect isn't very good, the last 2 tabs are jittery and not seamless..
0
 
LVL 6

Expert Comment

by:APoPhySpt
ID: 39170626
Are you running the last jquery version ? did you try the .hide(600) and .show(600)
0
 

Author Comment

by:UName10
ID: 39171223
Hi just changed it to this, but it's got an odd effect now (especially the aboutus) tab...

$(window).load(function(){
	
	$('.tab:not(.aboutus)').hide(400);
	
	$('.tabs li').click(function(){
		var thisAd = $(this).parent().parent();
		$(thisAd).children('.tab').hide();
		$(thisAd).children('.'+$(this).attr('class').replace('tab','')).show(400);
		$('.tabs li').removeClass('active');												 	
		$(this).addClass('active');
	});

	
	if(window.location.hash) {
		if (window.location.hash == "#map") {
			$(".Advert").children('.tab').hide();
			$(".Advert").children('.map').show();
			$('.tabs li').removeClass('active');												 	
			$('.maptab').addClass('active');
		}
		if (window.location.hash == "#voucher") {
			$(".Advert").children('.tab').hide();
			$(".Advert").children('.vouchers').show();
		}
	}	
	
});

Open in new window


Thanks again..
0
 
LVL 6

Expert Comment

by:APoPhySpt
ID: 39171307
try replacing

$('.tab:not(.aboutus)').hide(400);
with:
$('.tab:not(.aboutus)').slideDown(600);
0
 

Accepted Solution

by:
UName10 earned 0 total points
ID: 39171325
Same effect I'm afraid... Don't know why it's not working either!
0
 

Author Closing Comment

by:UName10
ID: 39683124
fsb\f
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

612 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question