'effect'在jsfiddle中运行正常但在实时代码中没有([object Object]没有方法'effect')

Question

相关但不是修复:jQuery问题 - #<Object>没有方法

我Object [object Object] has no method 'effect'尝试effect在jquery中使用该函数时遇到错误(doc http://docs.jquery.com/UI/Effects/Highlight).它在JSFiddle中运行良好,但是当我在Chrome或IE中运行该站点时,它会出错.div显示但效果调用会引发错误.

现场版可以在这里找到: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>

这个coffeescript:

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

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

  return

在JS中看起来像这样:

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

我已经尝试在该行上使$ div成为jquery选择器,而不是使用变量.我试过在$()中包装$ div.我仍然在页面的真实版本上收到错误.Chrome和IE9的结果相同.显然,我遗漏了一些jquery对象的行为方式.

Answer 1

我相信jQuery UI没有在本地部署:检查Firebug/Chrome等进行验证.

.toggle()是jQuery核心的一部分,.effect()是jQuery UI的一部分:为了使它不起作用,jQuery UI必须不存在.