'effect' works fine in jsfiddle but not in live code ([object Object] has no method 'effect' )

Question

Related, but not a fix: jQuery issue - #<an Object> has no method

I'm getting an 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's working fine in JSFiddle but it errors out when I run the site in Chrome or IE. The div gets shown but the effect call throws an error.

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 coffeescript:

$(document).ready ->
  $('#howThisWorks').hide()

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

  return

Which looks like this in JS:

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

I've tried making the $div a jquery selector on that line instead of using the variable. I've tried wrapping $div in $(). I'm still getting the error on the real version of the page. Same result in Chrome and IE9. Clearly I'm missing something about how jquery objects behave.

Answer 1

I believe that jQuery UI is not getting deployed locally: check in Firebug/Chrome etc. to verify.

.toggle() is part of core jQuery, .effect() is part of jQuery UI: in order for this not to be working, jQuery UI must not be present.