LINUX.ORG.RU

[jQuery] animate background color


0

1
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function()
{
	$("#green").click(function(){ $("body").css('background', 'green'); });

	$("#red").click(function(){ $("body").animate({ 'backgroundColor': 'red' }, "slow"); });
});
</script>

<a id="green" href="#">green</a><br />
<a id="red" href="#">red</a>

#green - работает.

#red - не работает, а должно ли?

А может нужно писать «background-color»? По крайней мере в RightJS стили принято писать на css-манер, а не в искажённом js-виде.

avol ()

All animated properties should be numeric (except as noted below); properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.)

http://api.jquery.com/animate/

isden ★★★★★ ()
Ответ на: комментарий от isden

> All animated properties should be numeric (except as noted below); properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.)

Спасибо. Но отстой, что нельзя))

jsignal ()
Ответ на: комментарий от jsignal

а сделать callback в animate и в нем через css менять, не? :)

isden ★★★★★ ()
Ответ на: комментарий от isden

а, не. callback там по завершении animate вызывается :(

isden ★★★★★ ()
Ответ на: комментарий от jsignal

> Спасибо. Но отстой, что нельзя))

или используй RightJS :)

avol ()
Ответ на: комментарий от jsignal

хехе. там все просто решается, как оказалось.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script src="http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js«></script>

<script type=„text/javascript“>
$(document).ready(function()
{
$(»#green").click(function(){ $(«body»).css('background', 'green'); });

$(«#red»).click(function(){ $(«body»).animate({backgroundColor: 'red'}, 1000); });
});
</script>

<a id=«green» href=«#»>green</a><br />
<a id=«red» href=«#»>red</a>

isden ★★★★★ ()
Ответ на: комментарий от avol

Таки на RightJS (штоб было) :)

$(document).onReady( function()
{
	'#green'.onClick( function( event )
	{
		this.morph(
			{
				'background-color': 'red'
			},
			{
				duration: 'long'
			}
		);
	}
});
avol ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.