Question

我的页面上有几张桌子，但我只显示其中的三张，当我点击下一张时，ID最低的表格会消失，另一张隐藏的桌子会出现。

当我点击上一个时，最高ID消失，显示ID较低的隐藏表。

我的css：

table.invisible{ display: none }

我的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>

我的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');
});

所有工作。但它以非常简单的方式工作 - 一个表隐藏，另一个表格，就是它 - 你能给我一些建议，让它看起来更好吗？（我想使用jquery，但我尝试过悲惨的效果:)）

Answer 1

您是否考虑过CSS过渡？我在以下方面取得了很大的成功：

.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;
}

这意味着：

立即制作不透明度（淡入/淡出）
在将宽度和高度更改为零之前等待淡出（以避免用户交互）

如果那不是你的一杯茶，那么还有其他无限的选择：

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

Answer 2

您可以使用jQuery UI switchClass()：

<强>摘要
   添加和删除指定的类到每个集合   匹配元素，同时为所有样式更改设置动画。

方法签名
  .switchClass（removeClassName，addClassName [，duration] [，easing]   [，完成]）

例如，要使表1可见并且表2同时不可见（假设它们都处于相反的状态以开始）：

// 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);

为了获得更好的效果，您可以使用方法easing参数甚至callback参数来链式切换，以确保在第一次完成后启动，类似于：

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

有关所有参数详细信息和示例，请参阅API documentation。

使用您现有的代码，您可以实现与此类似的switchClass()：

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

Answer 3

怎么样......

$（'＃next'）。click（function（）{

$（'＃table1'）。fadeOut（1000，function（）{

$（ '＃table2的'）淡入（1000）。 }）;

}）;

只是一个想法......它可以很容易地通过变量进行描述/抽象......

Answer 4

动画表实际上是不可能的，但是您可以将表格包装成可以轻松制作动画并获得所需效果的内容。

jQuery确实内置了一些不错的效果，并且浏览器支持很好。这是一个非常简单的jQuery方法来动画你的表，有一些技巧将表包装在div中，然后动画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");
});

这只是概念的证明。这是一个小提琴，显示它为下一个按钮。 http://jsfiddle.net/ydquw/4/上一个按钮类似，但您可以使用slideDown（）作为顶部元素，使用fadeOut（）作为底部元素。

如何隐藏一个表并以漂亮的动画方式显示另一个表？

4 个答案: