The effect works fine in jsfiddle, but not in real code (the object object has no effect effect)

Question

A related but not fix: jQuery issue - # <Object> has no method

I get the error Object [object Object] has no method 'effect' when I try to use the effect function in jquery (doc http://docs.jquery.com/UI/Effects/Highlight ), It works fine in JSFiddle, but he is mistaken when starting the site in Chrome or IE. A div is displayed, but calling the effect causes an error.

A live version can be found here: http://jsfiddle.net/jcollum/HK625/

HTML

 <a id=showHowThisWorks >How does this all work?</a> <div id="howThisWorks" style="display: none; "> <p>It works fine</p> </div> 

And this coffee pot:

 $(document).ready -> $('#howThisWorks').hide() $('#showHowThisWorks').click -> $div = $('#howThisWorks') $div.toggle(); $div.effect("highlight", {}, 10000) return return 

What looks in JS:

  $(document).ready(function() { $('#howThisWorks').hide(); $('#showHowThisWorks').click(function() { var $div; $div = $('#howThisWorks'); $div.toggle(); $div.effect("highlight", {}, 6000); }); }); 

I tried making $ div a jquery selector on this line instead of using a variable. I tried wrapping $ div in $ (). I am still getting an error on the actual version of the page. Same result in Chrome and IE9. Obviously, I missed something about how jquery objects behave.

Answer 1

I believe the jQuery user interface is not deployed locally: check Firebug / Chrome, etc. to check.

.toggle() is part of the jQuery core, .effect() is part of the jQuery user interface: for this to not work, the jQuery user interface must not be present.