Chaining JQuery commands_问答_开发者_运维开发者技术经验分享

I have a simple table that I want to fade out, replace the contents of the table, then fade back in. Since JQuery lets you chain commands, I thought this could be done in one simple step:

$('#testTable').fadeOut(500).rep开发者_如何学PythonlaceWith(generateTable()).fadeIn(500);

This, however, does not work. It replaces the table but skips the fade effects. I also tried to use the callback function in FadeOut().

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

In this version, the table fades out, replaces the contents, but re-appears immediately. I though this might be because my new table does not have the opacity property set, but if I set it to 0 inside generateTable, the table never reappers, even if I call fadeIn() again.

Can someone help me understand why this is happening, and what would be the right way to generate the fadeOut / fadeIn effect I'm looking for? The full code for this test is shown below. Thanks for your help.

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

Have you tried:

var testTable = $('#testTable');

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

I'm a little confused on the effect you're trying to achieve so leave a comment with clarification and I'll run with it.

The issue arrises because you remove the faded out table, and its replacement does not inherit attributes such as opacity from the original.

Try setting the new table's display to none so that the .fadeIn() has a starting point:

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

animations run simultaneously. If you want an animation to happen after another one ends, you need to use callbacks, like ... $("#x").fadeIn(300,function() {$("#x").fadeOut()})

I suspect it has something to do with the .replaceWith(). If you remove the .fadeIn() does the table still appear?

perhaps do something more like

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

I have a simple table that I want to fade out, replace the contents of the table, then fade back in

Well there's your problem. .replaceWith() doesn't replace the content of the table, it replaces the table itself.

This should work:

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

fiddle: http://jsfiddle.net/9bkAy/

Start off my intiailly hiding (style = display:none;) your other data table. The callback effect isn't working because your element doesn't "exist" yet, therefore it has nothing to animate.

Take this fiddle for example: http://jsfiddle.net/Kph8X/1/