Цепные команды JQuery - PullRequest
Новая
       6

Цепные команды JQuery

0 голосов
/ 30 июня 2011

У меня есть простая таблица, которую я хочу исчезнуть, заменить содержимое таблицы, а затем снова включить ее. Поскольку JQuery позволяет объединять команды, я подумал, что это можно сделать за один простой шаг: 

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

Это, однако, не работает. Он заменяет таблицу, но пропускает эффекты затухания. Я также попытался использовать функцию обратного вызова в FadeOut (). 

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

В этой версии таблица исчезает, заменяет содержимое, но немедленно появляется снова. Хотя это может быть связано с тем, что в моей новой таблице не установлено свойство непрозрачности, но если я установлю его в 0 внутри generateTable, таблица никогда не будет повторно отображаться, даже если я снова вызову 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>

Ответы [ 6 ]

1 голос
/ 30 июня 2011

анимации запускаются одновременно.Если вы хотите, чтобы анимация происходила после завершения другой, вам нужно использовать обратные вызовы, например ... $("#x").fadeIn(300,function() {$("#x").fadeOut()})

1 голос
/ 30 июня 2011

Проблема возникает из-за того, что вы удаляете затухшую таблицу и ее замена не наследует такие атрибуты, как непрозрачность, от оригинала.

Попробуйте установить отображение новой таблицы на none, чтобы .fadeIn () имела начальную точку: 

$('#testTable').fadeOut(500, function () {
   $('#testTable').replaceWith(generateTable());
   $('#testTable').hide().fadeIn(500); 
});
1 голос
/ 30 июня 2011

Вы пробовали: 

var testTable = $('#testTable');

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

Я немного озадачен тем эффектом, которого вы пытаетесь достичь, поэтому оставьте комментарий с разъяснениями, и я поработаю с ним.

0 голосов
/ 30 июня 2011

Начните с моего внутреннего сокрытия (style = display:none;) вашей другой таблицы данных.Эффект обратного вызова не работает, потому что ваш элемент еще не «существует», поэтому ему нечего анимировать.

Возьмем эту скрипку, например : http://jsfiddle.net/Kph8X/1/

0 голосов
/ 30 июня 2011

У меня есть простая таблица, которую я хочу исчезнуть, заменить содержимое таблицы, а затем постепенно исчезнуть в

Ну, есть ваша проблема..replaceWith() не заменяет содержимое таблицы, оно заменяет саму таблицу .

Это должно работать: 

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

скрипка: http://jsfiddle.net/9bkAy/

0 голосов
/ 30 июня 2011

Я подозреваю, что это как-то связано с .replaceWith (). Если вы удалите .fadeIn (), таблица все равно появится?

возможно, сделайте что-то более похожее на 

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