0

我的页面上有几个表格，但我只显示其中三个，当我单击下一步时，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，但我已经尝试过糟糕的效果:)）

4

4 回答 4

0

你考虑过 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

于 2013-01-03T01:00:05.513 回答
0

您可以使用jQuery UI switchClass()：

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

方法签名
.switchClass(removeClassName, addClassName [, duration ] [, easing ] [, complete ])

例如，要同时使表 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 文档。

使用您现有的代码，您可以实现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);
});
于 2013-01-03T01:00:32.187 回答
0

诸如此类的东西呢...

$('#next').click(函数(){

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

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

});

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

于 2013-01-03T01:29:56.490 回答
0

动画表格实际上是不可能的，但您可以将表格包裹在可以轻松动画并获得所需效果的东西中。

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()。

于 2013-01-03T02:28:22.973 回答