Jquery not loading

Question

Alright guys, I'm trying to get a handle on Jquery, but now that I"m actually implementing it, I'm finding it hard to get it to return anything. As in, I am not even entirely sure if I'm loading it correctly or if I have some random typo keeping anything from working. I will qualify that I added a simple Javascript code in the bottom with a document.write to ensure the javascript file was indeed linked. It worked fine.

If I click the h1, nothing happens. Regardless of the Jquery command I enter even if it is just inside $(document).ready, it will still do...nothing.

Here is the actual Jquery/Javascript:

$(document).ready(function() {
  $("h1").click(function() {
    $(this).animate({color:blue}, 'fast');
 });
});

Here is where I am calling it in the HTML (below).

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>

The .js script is indeed called script.js and in the same directory as the HTML. I'm a bit new to both so this could well be a very newbie mistake.

rlemon · Accepted Answer · 2013-03-14 17:56:49Z

2

There is an error in your code, you'd be best to use some Developer Tools while testing to catch these.

Uncaught ReferenceError: blue is not defined

the line:

$("h1").animate({color:blue}, 'fast');

expects blue to be a variable, you need to make it a string.

$("h1").animate({color:'blue'}, 'fast');

Also as mentioned by dystroy you need the plugin or the jQuery UI files. Additional notes from the documentation:

Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.

answered Mar 14, 2013 at 17:56

rlemon

17.7k14 gold badges95 silver badges126 bronze badges

OP, you'd be best to accept this answer, it's the most complete one.
– Denys Séguret
Commented Mar 14, 2013 at 18:05
(sorry, I wanted to try the new English sentence construct I just learnt)
– Denys Séguret
Commented Mar 14, 2013 at 18:06
haha, crazy english. I'm not even sure it's valid, I've always grown up using it and hearing it.
– rlemon
Commented Mar 14, 2013 at 18:27

Add a comment |

Denys Séguret · Accepted Answer · 2013-03-14 17:55:01Z

1

From the documentation :

All animated properties should be animated to a single numeric value, except as noted below; most 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, unless the jQuery.Color() plugin is used).

That's the main problem : if you try your code with a numeric property, it works.

If you really want to animate colors, I'd suggest to use the mentioned plugin.

answered Mar 14, 2013 at 17:55

Denys Séguret

384k90 gold badges811 silver badges778 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Jquery not loading

2 Answers 2

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related