• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 189
  • Last Modified:

Smooth transition needed for fade effect

I've added a fade effect to the following tabs here, but the transition isn't smooth, especially on the last 2 tabs.

I'd like it be like this page here.

Here's the Javascipt if someone could help:

$(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

0
UName10
Asked:
UName10
  • 2
1 Solution
 
Jagadishwor DulalBraces MediaCommented:
Add delay in your fadeIn and fadeOut function Like:
$(".Advert").children('.vouchers').fadeIn(2000);

Open in new window

0
 
UName10Author Commented:
Hi thanks for the comment, yes it does have a delay, but no matter how long or short, the effect is wrong..
0
 
UName10Author Commented:
No solution
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now