How to hide one table and show another in nice animated way?

Question

I have a few tables on my page, but I'm displaying only three of them, when I click next, the table with lowest ID disappears, and another, hidden table appears.

when I click previous, the highest ID disappears and hidden table with lower ID appears.

My css:

table.invisible{ display: none }

My html:

<button id="next"></button><button id="prev"></button>
<table id="1" class="visible" >...</table>
<table id="2" class="visible" >...</table>
<table id="3" class="visible" >...</table>
<table id="4" class="invisible" >...</table>
<table id="5" class="invisible" >...</table>
<table id="6" class="invisible" >...</table>

My JS:

$("#next").click(function(){
    $(lowest_visible_id).removeClass('visible');
    $(lowest_visible_id).addClass('invisible');

    $(highest_visible_id+1).removeClass('invisible');
    $(highest_visible_id+1).addClass('visible');
});

$("#prev").click(function(){
    $(highest_visible_id).removeClass('visible');
    $(highest_visible_id).addClass('invisible');

    $(lowest_visible_id-1).removeClass('invisible');
    $(lowest_visible_id-1).addClass('visible');
});

IT ALL WORKS. But it works in very simple way - one table hides, another shows and that's it - can you give me some suggestions how to make it look nicer? (I suppose using jquery, but I've tried with miserable effects :) )

What about jquery tabs() ? http://stackoverflow.com/questions/2654885/applying-effects-to-jquery-ui-tabs — jtheman, Jan 03 '13 at 00:33
@pawel: Have any of the provided answers helped you at all? If not, can you pass on some more details on what your issue still is please. — Nope, Jan 11 '13 at 21:27

hunterloftis · Answer 1 · 2013-01-03T01:07:46.843

Have you considered CSS transitions? I've had good success with something along the lines of:

.hidden {
  opacity: 0;
  width: 0;
  height: 0;
  transition: opacity 0.3s ease-out 0.001s, width 0 ease-out 0.3s, height 0.3s ease-out 0.3s;
}

.visible {
  opacity: 1;
  transition: opacity 0.3s ease-out 0.1s, width 0.001s ease-out 0.001s, height 0.001s ease-out 0.001s;
}

This means:

animate opacity immediately (fade in/out)
wait for fade-out before changing width and height to zero (to avoid user interaction)

If that's not quite your cup of tea, there are unlimited other options:

http://www.css3maker.com/css3-transition.html

Nope · Accepted Answer · 2013-01-03T01:14:00.010

You could use jQuery UI switchClass():

Summary
Adds and removes the specified class(es) to each of the set of matched elements while animating all style changes.

Method Signature
.switchClass(removeClassName, addClassName [, duration ] [, easing ] [, complete ])

For example, to make table 1 visible and table 2 invisible simultaneously (assuming they are both in the opposite state to start with):

// Switches table 1 from visible to invisible over a period of 1 second.
$("table#1").switchClass("visible", "invisible", 1000);

// Switches table 2 from invisible to visible over a period of 1 second.
$("table#2").switchClass("invisible", "visible", 1000);

For further great effects you can use the methods, easing argument or even the callback argument to chain class switching to ensure one starts after the first completes, similar to:

// Switches table 1 from visible to invisible and once it completed, table 2 will switch from invisible to visible.
$("table#1").switchClass("visible", "invisible", 1000, function(){
    $("table#2").switchClass("invisible", "visible", 1000);
});

See API documentation for all the argument details and example.

Using your existing code you could implement switchClass() similar to this:

$("#next").click(function(){
    $(lowest_visible_id).switchClass('visible', 'invisible', 1000);
    $(highest_visible_id+1).switchClass('invisible', 'visible', 1000);
});

$("#prev").click(function(){
    $(highest_visible_id).switchClass('visible', 'invisible', 1000);
    $(lowest_visible_id-1).switchClass('invisible', 'visible', 1000);
});

score 0 · Answer 3 · answered Jan 03 '13 at 01:29

0

What about something like...

$('#next').click( function() {

$('#table1').fadeOut(1000, function() {

$('#table2').fadeIn(1000); });

});

Just a thought... and it could be parameritized/abstracted via variables pretty easily...

answered Jan 03 '13 at 01:29

napo

869
9
19

score 0 · Answer 4 · answered Jan 03 '13 at 02:28

Animating a table is not really possible, but you can wrap the tables in something that can be easily animated and get the desired effects.

jQuery does have some nice effects built in, and the browser support is good. Here is a very simple jQuery approach to animating your tables, with some trickery that wraps the the table in a div, and then animates the div.

$("#next").click(function(){
    $(lowest_visible_id).wrap("<div />").parent()
        .slideUp(function(){
               $(lowest_visible_id).unwrap().removeClass("visible").addClass("invisible");
      }); 

    $(highest_visible_id+1).fadeIn().removeClass("invisible").addClass("visible");
});

This is just proof of concept. Here is a fiddle that shows it for the next button. http://jsfiddle.net/ydquw/4/ Previous button would be similar, but you could use slideDown() for the top element, and fadeOut() on the bottom one.

How to hide one table and show another in nice animated way?

4 Answers4