jQuery исчезает в цвет фона - PullRequest
Новая
       10

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

12 голосов
/ 16 апреля 2010

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

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

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

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

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

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

Ответы [ 4 ]

18 голосов
/ 16 апреля 2010

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

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

9 голосов
/ 16 апреля 2010

Питер Пеллер точечно, если вы еще не используете 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);
      }
  );
1 голос
/ 16 апреля 2010

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

highlightFade

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

0 голосов
/ 06 апреля 2012

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

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

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

...