Response title
This is preview!
Move this topic
[jQuery] How to animate background-color ?
in Using jQuery
•
15 years ago
Hi guys,
I was wondering if anybody could help with this. I am trying to do animate
on the backgound-color of a div, but I got an error message saying that
'background-color' is not supported.
Here is my code:
$("#testanimate").mouseover(function(){
$(this).animate({'background-color':'#ffffff'},"slow");
});
Is this the correct way of doing it ? Have I missed something ?
Thanks for the help,
Chris
--
View this message in context: http://www.nabble.com/How-to-animate-background-color---tf3199612.html#a8883462
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Replies(2)
Re: [jQuery] How to animate background-color ?
15 years ago
<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; ">Hi there Chris,<DIV><BR class="khtml-block-placeholder"></DIV><DIV>Only a subset of CSS properties are able to be animated with the jQuery core alone. For extended animation support, check out the Interface plugin. Here is a link to documentation on animate:</DIV><DIV><A href="http://interface.eyecon.ro/docs/animate">http://interface.eyecon.ro/docs/animate</A> <BR><DIV><BR class="khtml-block-placeholder"></DIV><DIV> <SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; ">And here is a snippet of code that gives you an idea of what you can do with it:</SPAN></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">$('#test').animate(</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN>{</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN>left: 100,</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN>style: 'padding: 20px 30px; margin: 10px;',</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN>className: 'greenBorders',</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN>opacity: 0.4,</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN>backgroundColor: 'olive'</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN>},</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN>'slow'</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">);</DIV><DIV><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><BR class="Apple-interchange-newline"><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><DIV><BR class="khtml-block-placeholder"></DIV><DIV>--Karl</DIV><DIV>_________________</DIV><DIV>Karl Swedberg</DIV><DIV>www.englishrules.com</DIV><DIV>www.learningjquery.com</DIV><DIV><BR class="khtml-block-placeholder"></DIV><BR class="Apple-interchange-newline"></SPAN></SPAN> </DIV><BR><DIV><DIV>On Feb 9, 2007, at 5:37 AM, Mahadewa wrote:</DIV><BR class="Apple-interchange-newline"><BLOCKQUOTE type="cite"><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Hi guys,</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">I was wondering if anybody could help with this.<SPAN class="Apple-converted-space"> </SPAN>I am trying to do animate</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">on the backgound-color of a div, but I got an error message saying that</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">'background-color' is not supported.</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Here is my code:</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>$("#testanimate").mouseover(function(){</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>$(this).animate({'background-color':'#ffffff'},"slow");</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "><SPAN class="Apple-converted-space"> </SPAN>});</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Is this the correct way of doing it ? Have I missed something ?</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; min-height: 14px; "><BR></DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Thanks for the help,</DIV><DIV style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">Chris</DIV></BLOCKQUOTE></DIV></DIV></BODY></HTML>_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Leave a comment on kswedberg's reply
Re: [jQuery] How to animate background-color ?
15 years ago
Thanks Guys !
I knew about Interface plugin, and more or less what it does.
What I didn't know was that the Core has some limitation.
Thanks again for the explanations.
Cheers,
Chris
Karl Swedberg-2 wrote:
>
> Hi there Chris,
>
> Only a subset of CSS properties are able to be animated with the
> jQuery core alone. For extended animation support, check out the
> Interface plugin. Here is a link to documentation on animate:
> http://interface.eyecon.ro/docs/animate
>
> And here is a snippet of code that gives you an idea of what you can
> do with it:
> $('#test').animate(
> {
> left: 100,
> style: 'padding: 20px 30px; margin: 10px;',
> className: 'greenBorders',
> opacity: 0.4,
> backgroundColor: 'olive'
> },
> 'slow'
> );
>
>
> --Karl
> _________________
> Karl Swedberg
> www.englishrules.com
> www.learningjquery.com
>
>
>
> On Feb 9, 2007, at 5:37 AM, Mahadewa
Leave a comment on brajamusti's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to brajamusti's discussion