jQuery постепенно появляется цвет фона
Я пытаюсь постепенно появиться цвет фона строки таблицы и не могу разобраться в нем. Постепенное появление произойдет, когда кнопка будет нажата.
Я попробовал что-то как:
$("#row_2").fadeIn('slow').css('background', 'gold')
И хотя это применит цвет к строке таблицы, он не постепенно появится, но применит его сразу.
Я уверен, что это - простая вещь, но я не могу найти ответ на это. Я посмотрел на всем протяжении в этом веб-сайте, но все еще никакой удаче для этой определенной вещи.
Заранее спасибо
3 ответа
В чистом jQuery нет функций для анимации цветов. Вы должны использовать jQueryUI или плагин цвета jQuery .
Затем используйте функцию .animate () .
Питер Пеллер отлично подходит, если вы еще не используете пользовательский интерфейс jquery , то, по крайней мере, используйте плагин цвета 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);
}
);
К сожалению, изменение цвета фона невозможно (я не знаю о последней версии jquery). Однако вы можете использовать этот плагин для этой цели:
Теперь вам решать, будете ли вы использовать этот плагин только для эффекта затухания фона:)