JQuery исчезает в фоновом цвете

Я пытаюсь затухать в фоновом цвете строки таблицы и не могу понять это правильно. Затухание произойдет при нажатии кнопки.

Я пробовал что-то вроде:

$("#row_2").fadeIn('slow').css('background', 'gold')

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

Я уверен, что это простая вещь, но я не могу найти ответ на этот вопрос. Я просмотрел его на этом веб-сайте, но мне все равно не повезло в этом.

Заранее спасибо

Ответы

Ответ 1

Чистый jQuery не имеет функциональности для анимации цветов. Вы должны использовать jQueryUI или плагин jQuery color.

Затем используйте функцию .animate().

Ответ 2

Питер Пеллер находится на месте, если вы еще не используете jquery UI, то по крайней мере пойти с плагин цвета jQuery.

Ниже приведен фрагмент кода, который я взломал, который имел успех во множестве браузеров:

<a href="#" ID="fadeTable" title="click to fade col1">Click to fade Column 1</a>
<table width="400px"  border="1" cellspacing="0" cellpadding="1" 
                      summary="This is my test table">
  <caption align="top">
  My Caption
  </caption>
  <tr>
    <th scope="col" class="row0 col1" >Col 1</th><th scope="col">Col 2</th>
  </tr>
  <tr>
    <td class="row1 col1" >one</td><td>Uno</td>
  </tr>
  <tr>
    <td class="row2 col1" >two</td><td>Dos</td>
  </tr>
</table>
<script language="javascript" type="text/javascript">
 $(document).ready(function(){
    // requires http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js
    var iAniSpeed = 2000;
    var sBgColor = 'gold';
    $('#fadeTable').click(function(){
      $('td.col1').animate( { backgroundColor: sBgColor }, iAniSpeed);
        return false;       
    });
});
</script>

В качестве альтернативы вам может понадобиться сначала покрасить фон в исходный цвет, а затем оживить новый цвет.

Чтобы это произошло, просто замените текущий блок анимации примерно следующим образом:

  $('td.col1').animate( { backgroundColor: 'white' }, 250, function() 
      {
        $(this).animate( { backgroundColor: 'gold' }, 2000);
      }
  );

Ответ 3

К сожалению, невозможно затухать в фоновом цвете (я не знаю о последней версии jquery). Однако вы можете использовать этот плагин для этой цели:

highlightFade

Теперь вам решать, используете ли вы этот плагин или нет только для эффекта затухания фона:)

Ответ 4

Как насчет эффекта подсветки jquery, например:

$("div").click(function () {
      $(this).effect("highlight", {}, 3000);
});

Также вы можете указать цвет и продолжительность, которые должны быть освещены. Вы можете узнать больше из сайта jQuery.