CODEWITHSUNDEEP
javascript
user2367386
user2367386

Reputation:

Smooth transition for fade effect on tab content

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();
        }
    }   

});

Many thanks.

Upvotes: 1

Views: 3024

Answers (2)

AlbertEngelB
AlbertEngelB

Reputation: 16446

The issue is that the other page is using callbacks for their animations. After an animation completes, it executes the callback. You can use this to smoothly .fadeOut() and .fadeIn() elements.

$('.tab').click(function() {
  $('.content-to-fade-out').fadeOut('fast', function() {
    $('.content-to-fade-in').fadeIn('fast')
  })
})

Upvotes: 0

Rob Johnstone
Rob Johnstone

Reputation: 1734

Seems pretty smooth in my browser. Both pages are using JQuery and have essentially the same code. The only difference is that the second uses a time of 200ms for both the fadeout and fadein so try that and see if it's more to your liking.

EDIT: Sorry realised the problem. While the current view is fading out, it is still on the page and so the new view is rendered below it before jumping into the correct position after the first one has finished fading. You need to position the views absolutely so they do not affect each others position.

EDIT2: The easiest implementation is to wrap a div around the tabs and then use that:

<div class="tabContainer">
  <div class="tab aboutus" style="display:none">...</div>
  <div class="tab map" style="display:none">...</div>
  <div class="tab features" style="display:none">...</div>
  <div class="tab vouchers" style="display:none">...</div>
</div>

In css we give the container a position of relative to act as a bounding box for the tabs:

.tabContainer {
  position: relative;
}

and we give the tabs an absolute position. The top and left coordinates are relative to the container so that's why they're 0.

.tab {
  margin: 0 0 8px 0;
  position: absolute;
  top: 0;
  left: 0;
}

And the js:

$(function() { // as you're using jquery anyway you might as well use the JQuery ready function which probably suits your purposes better anyway.
      $('.tabs li').click(function(){      
          $('.tab').filter(':visible').fadeOut(200); // I'm using simpler selectors than you which will give a (very) slight performance boost (but check to make sure this won't cause any conflicts elsewhere)
          $('.tab').filter('.'+$(this).attr('class').replace('tab', '')).fadeIn(200);
          $('.tabs li').removeClass('active');                                                    
          $(this).addClass('active');
      }

      // I've deleted some code here as it doesn't do anything other than throw exceptions.

      if(window.location.hash) { // Due to the changes to the html this needs changing too.
            if (window.location.hash == "#map") {
                $('.tab').hide();
                $('.map').show();
                $('.tabs li').removeClass('active');                                                    
                $('.maptab').addClass('active');
            }
            if (window.location.hash == "#voucher") {
                $('.tab').hide();
                $('.vouchers').show();
                $('.tabs li').removeClass('active');                                                    
                $('.vouchertab').addClass('active');
            }
            else {
                $('.aboutus').show(); // even better would be to make this visible by default in css but I'll leave it as js as that's what you had in your question
            }
        }   
    });

Note: I've not been able to test the javascript but it should work. Let me know in the comments if you have any trouble

Upvotes: 1

Related Questions