jQuery不再起作用了（在我的网站上）

Question

因此，我在这里进行了一个小小的简单jquery，其中div会向下滑动一点。 但是jquery文件中的什么都没用：

$('.starterLink').click(function(){
    $('.starterSummary').animate({'width': '230px'});
      });    
});

但是，我有一个完全相同的代码的不同网站，并且这个网站有效！ Bu我需要它来完成这一工作。 有什么建议么？ 您在这里看到任何错误吗？

的HTML：

<div class="packages">
    <div class="starter">
        <span><a href="@Href("#")" class="starterLink"><h1 class="starterLink">Starter Pack</h1></a></span>
    </div>
    <div class="business">
        <span><h1>Business</h1></span>
    </div>
    <div class="corporate">
        <span><h1>Corporate</h1></span>
    </div>
</div>
<div class="packageSummaries">
    <div class="starterSummary">
        <h1>Free Advertising</h1>
        <p></p>
        <a href="" class="roundedButton silver">Service Link</a>
    </div>
    <div class="businessSummary">
        <h1></h1>
        <p>Service summary</p>
        <a href="" class="roundedButton silver">Service Link</a>
    </div>
    <div class="corporateSummary">
        <h1>Service Heading</h1>
        <p>Service summary</p>
        <a href="" class="roundedButton silver">Service Link</a>
    </div>
</div>

CSS：

.packages {
    width: 60%;
    background-image: url('../Images/pres-bg.png');
    background-repeat: repeat;
    float: left;
}
.packageSummaries {
    width: 40%;
    float: right;
}
.starter {
    position: relative;
    width: 35%;
    float: left;
    height: 140px;
    overflow: hidden;

    background-color: #02A7FF;
    opacity: .7;
}
.starter span {
  position: absolute;    
  bottom: 0;    
  right: 0; 
}
.business {
    position: relative;
    width: 35%;
    float: left;
    height: 140px;
    overflow: hidden;

    background-color: #FF7402;
    opacity: .7;
}
.business span {
  position: absolute;    
  bottom: 0;    
  right: 0; 
}

.corporate {
    position: relative;
    width: 30%;
    float: left;
    height: 140px;
    overflow: hidden;
    background-color: #111111;
    opacity: .7;
}
.corporate span {
  position: absolute;    
  bottom: 0;    
  right: 0; 
}
.starterSummary {
    padding-left: 8px;
    margin: 0;
    width: 0px;
    background-color: Blue;
    overflow: hidden;
}
.businessSummary {
    padding-left: 8px;
    margin: 0;
    width: 0px;
    overflow: hidden;

}
.corporateSummary {
    padding-left: 8px;
    margin: 0;
    width: 0px;
    overflow: hidden;

}

任何帮助都将不胜感激。 这让我难过。

谢谢

Answer 1

好像您有一个}）； 在您的jQuery中有很多。 您应该考虑在使用的浏览器中检查错误控制台。 它可能会显示该错误。

$('.starterLink').click(function(){
    $('.starterSummary').animate({'width': '230px'});
      });    
});

更新

也可能是因为您缺少对jquery.js的引用。 检查它是否包含为脚本标签，以及URL是否正确。

Answer 2

如果不存在jQuery，您将收到错误消息。 尝试在浏览器控制台上键入$，然后查看是否返回jQuery对象。

尝试从Google或其他CDN加载jquery。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>

Answer 3

您的脚本中存在语法错误：

$('.starterLink').click(function(){
    $('.starterSummary').animate({'width': '230px'});
    // -->  });    
});

Answer 4

<a href="@Href("#")"..>

引号是错误的。

尝试使用w3验证程序和jslint来查看所有内容是否有效。
如果可能的话，指向实际站点的链接也将有所帮助。

Answer 5

看起来像一个带有});的简单语法错误}); 那不应该在那里。

$('.starterLink').click(function(){
    $('.starterSummary').animate({'width': '230px'});    
});

如果您的代码中有错误，则所有Javascript均不起作用。

通常，您可以使用Firebug （如果使用的是Firefox）或浏览器的开发人员控制台来查找问题。

Answer 6

不匹配的花括号})和href="@Href("#")"是什么意思？

Answer 7

用href="@Href('"'#'"')"替换href="@Href("#")" href="@Href('"'#'"')"

这是一个演示

您可能无法看到动画，因为它会尝试导航到链接，在这里您可以看到动画http://jsfiddle.net/wvaE3/3/