CODEWITHSUNDEEP
javascriptjquery
Signify
Signify

Reputation: 77

Jquery not loading

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.

Upvotes: 2

Views: 194

Answers (2)

rlemon
rlemon

Reputation: 17666

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.

Upvotes: 2

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382092

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.

Upvotes: 1

Related Questions