jQuery just does not work anymore (on my site)

Question

So, I've got a tiny simple jquery going on here where a div will slide down just a bit. But NOTHING in the jquery file works:

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

However, I have a different website with the exact same code, and that one works! Bu I need it to work on this one. Any suggestions? Can you see anything wrong here?

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;

}

Any help at all is greatly appreciated. This has got me stumped.

Thank you

Answer 1

Seems like you have a }); to much in your jQuery. You should consider checking the errorconsole in the browser you're using. It would probably display that error.

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

UPDATE

It could also be because you're missing the reference to jquery.js. Check that it's included as a script-tag and that the URL is correct.

Answer 2

If jQuery is not present you should get an error. Try to type $ on the browser console and see if you get back the jQuery object.

Try to load jquery from Google or other CDN.

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

Answer 3

There is a syntax error in your script:

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

Answer 4

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

The quotes are wrong.

Try w3 validator and jslint to see if everything is valid.
Also a link to the actual site would help if it's possible.

Answer 5

Looks like a simple syntax error with a }); that shouldn't be there.

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

If you have an error in your code then none of the Javascript will work.

You can usually track down the issue using Firebug (if you're using Firefox), or just your browser's developer console.

Answer 6

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

Answer 7

replace href="@Href("#")" with href="@Href('"'#'"')"

here is a DEMO

you may not be able to see the animation because it'll try to navigate to the link, here you can see the animation http://jsfiddle.net/wvaE3/3/