代码在jsfiddle中有效，但在我的网站上不起作用

Question

I have coded a div that is mostly hidden until clicked on where it expands and then is hidden again when clicked on. You can look at the jsfiddle for that here: http://jsfiddle.net/Z8vEs/1/

I have used this method on another website and it works there, but for some reason not on a new website I am crafting, and frankly I am stumped and frustrated. I am not very well versed in jQuery so I am not sure how to go about debugging, so any suggestions would be appreciated. The only other jQuery I am using is an edited version of an image slider from codrops: http://tympanus.net/codrops/2011/08/09/portfolio-image-navigation/

You can view my website to see the issue for yourself at http://quintinmarcus.com/

Thanks for any help -Quintin

Answer 1

It doesn't look like you are loading jQuery properly on your website.

Inside the javascript file named custom.js you can see this:

/* ANIMATE ABOUT BOX */
$("#about").click(function() {
    if($('#about').css('width') == '83px'){
        $('#about').animate({'width':'380px'},350);
        $('#about').animate({'height':'457px'},350);
    }
    else{
        $('#about').animate({'width':'83px'},350);
        $('#about').animate({'height':'11px'},350);
    }
});

When it should really look like this:

/* ANIMATE ABOUT BOX */
$(document).ready(function(){

    $("#about").click(function() {
        if($('#about').css('width') == '83px'){
            $('#about').animate({'width':'380px'},350);
            $('#about').animate({'height':'457px'},350);
        }
        else{
            $('#about').animate({'width':'83px'},350);
            $('#about').animate({'height':'11px'},350);
        }
    });
});

Note the jQuery initiating script and closing tags at the top and bottom of the new version.

jsfiddle is adding that code by default for you since it is so common.

Answer 2

Because 'custom.js' file is loaded before <div id="about"> is created, you might wanna do something like this:

$(document).ready(function() {
    $("#about").click(function() {
    if($('#about').css('width') == '83px'){
      $('#about').animate({'width':'380px'},350);
      $('#about').animate({'height':'457px'},350);
    }
    else{
      $('#about').animate({'width':'83px'},350);
      $('#about').animate({'height':'11px'},350);
    }
    });

 });

Answer 3

I think there is an illegal character at the end of your script. I put this into the console and it worked (I removed the character):

$("#about").click(function() {
    if ($('#about').css('width') == '83px') {
        $('#about').animate({
            'width': '380px'
        }, 350);
        $('#about').animate({
            'height': '457px'
        }, 350);
    }
    else {
        $('#about').animate({
            'width': '83px'
        }, 350);
        $('#about').animate({
            'height': '11px'
        }, 350);
    }
});