I simply cannot get color animation plugin to work...please help.

hey.

i'm not a code expert or anything but i here's what i'm trying to do:
i set up this blog using weebly.com: http://noamagger.weebly.com and i wanna add color animations to the post titles and some buttons and i can't seem to get it working.
here's what i did:
added this to the html head:
<script type="text/javascript" src="http://www.jonathanlax.com/nmblog/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://www.jonathanlax.com/nmblog/js/jquery.color.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#blog-read-more-link").hover(function() {
$(this).stop().animate({ backgroundColor: "#53b9df"}, 800);
},function() {
$(this).stop().animate({ backgroundColor: "#e7e7e7" }, 800);
});
});
</script>

tried making the "read more" button's background to change colors on hover.

it simply does not work for me.
firebug gives me this:

$("#blog-read-more-link") is null
$("#blog-read-more-link").hover(function() {

i've tried so many things already and nothing seems to work...

please help!

thanx

Where is the element with ID "#blog-read-more-link" in your document?

You should avoid hotlinking.js files as it makes your functionality dependent on the presence of another site.

the other site is up, it's a host i own. the thing with weebly is that you cannot store files on their servers.

here's an image of where the color animation should happen:

http://www.jonathanlax.com/nmblog/nmscreenshot.gif

thanks for the quick reply!

nevermind - got it figured out! finally. it seems like the .js files i loaded conflicted with scripts that weebly uses. i switched the $() to jQuery()
so the script code in the head now looks like this:

<script type="text/javascript">
$(document).ready(function(){
jQuery("#blog-read-more-link").hover(function() {
jQuery(this).stop().animate({ backgroundColor: "#53b9df"}, 800);
},function() {
jQuery(this).stop().animate({ backgroundColor: "#e7e7e7" }, 800);
});
});
</script>

and now it works :)))

thanx again !

Unless I misunderstand, your script is addressing "#blog-read-more-link" but your target element is "blog-read-more-link".

apparentely my excitement was premature...
the button did in fact animate background colors but it only happened with the first button in the page. didn't work for any other "read more" buttons.

Logic Ali - my target element is an ID element from the css which is named "blog-read-more-link". since it's an ID i think the # should be there... am i wrong? i tried it without the # and it didn't work at all.

damn this!

If you want to target several elements with your code, they must not have the same id (which is supposed to be unique). Otherwise you will only reach the first element on the page (if you are lucky).