IE8 Kills my Jquery script

The following script works fine on Firefox, but fails on IE8 and I'm not sure why. What's supposed to happen is after I click a thumbnail image, a whole se开发者_StackOverflowries of animations executes. Instead, the thumbnails disappears and nothing else happens. I ran it through the I8 Developer Tools debugger; it didn't trigger any errors, though the jquery.min file did. Am I missing some IE8 related quirk?

<script>
    $(document).ready(function() {
        $('#back').hide();
        $('#full-wrap').hide();
        $('#thumb-wrap a').children().not('img').hide();//hide image captions

        moveIt = $('#thumb-wrap').outerWidth(); //Get the width of the thumb-wrap div

        $('#thumb-wrap a').click(function(){

            var $big = $(this).index(); //get 0-based index of the thumb that was just clicked
            $('#ajax-content > h1').hide();//hide the page title
            $('#thumb-wrap').hide(); //hide the thumbnails
            $(this).children().not('img').clone().appendTo($('#gallery-wrap')).wrapAll('<article/>').delay(600).fadeIn(); //Clone the image captions and wrap them in an article
            $('#back').fadeIn(500); //make the back button appear

            $('#full-wrap img').eq($big).siblings().hide(); //Hide all fullsized images that don't match the index of the clicked thumb
            $('#full-wrap img').eq($big).show(); //reveal fullsized image that does match the index of the clicked thumbnail

            $('#content').animate({'maxWidth': '+=' + moveIt * .5 + 'px', 'left': '6%'}, 'slow');
            $('#full-wrap').show(100).animate({ 'right': '+=' + moveIt * .75 + 'px'}, 'slow'); //slide out by a distance equal to the width of thumb-wrap.

        });

        $('#back').click(function(){
            $(this).fadeOut();//hide the back button
            $('article').remove();//remove the article div
            $('#full-wrap').animate({'right': '0', 'opacity' : 'toggle'}, 400);//hide the fullsize image div
            $('#content').animate({'maxWidth': moveIt, 'left' : '43%'}, 400);
            $('#thumb-wrap').delay(500).fadeIn(500);//reveal the thumbnails
            $('#content > h1').delay(500).fadeIn(100);//show the page title

        });

     });
</script>

Here's the live site So you can see what I mean. Any help would be appreciated.

You are missing a var when declaring moveIt = $('#thumb-wrap').outerWidth();....IE isn't very tolerant of this, and it's good practice to always declare your variables explicitly anyway. It should look like:

var moveIt = $('#thumb-wrap').outerWidth();

By not using var you're trying to say "declare this as a global variable", e.g. window.moveIt...but IE doesn't play that game, it'll just throw it back at you :)

Also, there's another IE<9 issue, .wrapAll('<article/>')...since IE doesn't support this element you can't natively use it here, you'll need something like html5shiv to get this working older IE versions.

I am using IE9 and its developer tools. There are lots of nulls/undefined variables getting trapped when I trap on all errors.