'efecto' funciona bien en jsFiddle pero no en vivo código ([object Object] no tiene 'efecto' método)

Question

relacionada, pero no una solución: jQuery issue - #<an Object> has no method

estoy recibiendo un error Object [object Object] has no method 'effect' cuando intento use la función effect en jquery (doc http://docs.jquery.com/UI/Effects/Highlight). Está funcionando bien en JSFiddle pero se produce un error cuando ejecuto el sitio en Chrome o IE. Se muestra el div pero la llamada de efecto arroja un error.

versión en vivo se puede encontrar aquí: 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> 

Y esto CoffeeScript:

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

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

    return 

¿Cuál es la siguiente con JS:

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

Intenté hacer el selector $ div a jquery en esa línea en lugar de usar la variable. Intenté incluir $ div en $(). Todavía estoy recibiendo el error en la versión real de la página. Mismo resultado en Chrome e IE9. Claramente, me falta algo acerca de cómo se comportan los objetos jquery.

Answer 1

creo que jQuery UI no está siendo desplegado a nivel local: el registro de entrada Firebug/cromo, etc. para verificar.

.toggle() es parte de core jQuery, .effect() es parte de jQuery UI: para que esto no funcione, jQuery UI no debe estar presente.