Question

我有一个简单的表，我希望淡出，替换表的内容，然后淡入。由于JQuery允许你链接命令，我认为这可以通过一个简单的步骤完成：

$('#testTable').fadeOut(500).replaceWith(generateTable()).fadeIn(500);

然而，这不起作用。它取代了表格但跳过了淡入淡出效果。我还尝试在FadeOut（）中使用回调函数。

    $('#testTable').fadeOut(500, function () {
      $('#testTable').replaceWith(generateTable());
      $('#testTable').fadeIn(500); 
    });

在此版本中，表格淡出，替换内容，但会立即重新显示。我虽然这可能是因为我的新表没有设置opacity属性，但是如果我在generateTable中将它设置为0，那么即使我再次调用fadeIn（），表也永远不会重新启用。

有人可以帮助我理解为什么会发生这种情况，以及生成我正在寻找的fadeOut / fadeIn效果的正确方法是什么？该测试的完整代码如下所示。谢谢你的帮助。

    <head>
<script src="../JSCommon/jquery-1.5.1.min.js"   type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {

   var SPACE = 32;
   var KEY_LEFT = 37;
   var KEY_RIGHT = 39;
   var KEY_UP = 38;
   var KEY_DOWN = 40;

   $(document).keydown(function(event) {
      console.log("keydown:  code=" + event.keyCode);

      if (event.keyCode == SPACE) {
        // Fades don't work in this verison
        //$('#testTable').fadeOut(500).replaceWith(generateTable()).fadeIn(500);

        // Fade Out works, fade in does not
        $('#testTable').fadeOut(500, function () {
          $('#testTable').replaceWith(generateTable());
          $('#testTable').fadeIn(500); 
        });
      } else if (event.keyCode == KEY_LEFT) {
        $('#testTable').fadeOut(500);
      } else if (event.keyCode == KEY_RIGHT) {
        $('#testTable').fadeIn(500);
      } else if (event.keyCode == KEY_UP) {
        $('#testTable').fadeOut(500).fadeIn(500);
      } else if (event.keyCode == KEY_DOWN) {
        $('#testTable').replaceWith(generateTable());
      }      
   });

   function generateTable() {     
      var table = '<table id="testTable" style="top:20px; left: 220px; background-color: #89BC38; position: absolute;">';
      for (var col=0; col<2; col++) {
        table += '<tr>';
        for (var row=0; row<2; row++) {
          table += '<td>' + Math.round(10 * Math.random()) + '</td>';
        }
        table += '</tr>';
      }
      return table;
   }

});
</script>

</head>

<body>

<table id="testTable" style="top:20px; left: 220px; background-color: #89BC38; position: absolute;">
  <tr>
    <td>1</td>
    <td>2</td>
   </tr>
   <tr>
      <td>3</td>
      <td>4</td>
   </tr>
<table>
  <p>
      left:  Fade Out<br>
      right: Fade In<br>
      up:    Fade Out then back in<br>
      down:  Replace Table<br>
      space: Fade out, replace table, fade in<br>
  </p>
</body>

Answer 1

你试过了吗？

var testTable = $('#testTable');

testTable.fadeOut(500, function () {
      testTable.html(generateTable()).delay(3000).fadeIn(500); // HTML or replaceWith here is possible, actually
});

我对你想要达到的效果感到有点困惑所以请留下澄清的评论，我会用它来运行。

Answer 2

问题是因为您删除了淡出的表，并且它的替换不会从原始表继承不透明度等属性。

尝试将新表格的显示设置为无，以便.fadeIn（）有一个起点：

$('#testTable').fadeOut(500, function () {
   $('#testTable').replaceWith(generateTable());
   $('#testTable').hide().fadeIn(500); 
});

Answer 3

动画同时运行。如果你想在另一个结束后发生动画，你需要使用回调，比如... $("#x").fadeIn(300,function() {$("#x").fadeOut()})

Answer 4

我怀疑它与.replaceWith（）有关。如果删除了.fadeIn（），表格仍会出现吗？

也许做更像

的事情

$('#testTable').html(generateTable());
$('#testTable').fadeIn(500);

Answer 5

我有一个简单的表，我想淡出，替换表的内容，然后淡出

那是你的问题。 .replaceWith()不会替换表格的内容，会替换表格本身。

这应该有效：

$('#testTable')
    .fadeOut(500, function(){$(this).html( /*content*/ )})
    .fadeIn(500);

小提琴：http://jsfiddle.net/9bkAy/

Answer 6

开始我的隐藏（style = display:none;）您的其他数据表。回调效果不起作用，因为你的元素尚未“存在”，因此它没有任何动画效果。

以此小提琴为例： http://jsfiddle.net/Kph8X/1/

链接JQuery命令

6 个答案: