IE8 убивает мой скрипт Jquery

Question

Следующий скрипт отлично работает на Firefox, но не работает на IE8, и я не уверен, почему. То, что должно произойти, это после того, как я нажму на миниатюру изображения, будет выполнена целая серия анимаций Вместо этого миниатюры исчезают, и больше ничего не происходит. Я запустил его через отладчик I8 Developer Tools; это не вызвало никаких ошибок, хотя файл jquery.min сделал. Я скучаю по какой-то причуде, связанной с IE8?

<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>

Вот живой сайт Так что вы можете понять, что я имею в виду. Любая помощь будет оценена.

Answer 1

Вы пропускаете var при объявлении moveIt = $('#thumb-wrap').outerWidth(); .... IE не очень терпимо относится к этому, и хорошей практикой является всегда объявлять ваши переменные в любом случае явно.Это должно выглядеть так:

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

По не при использовании var вы пытаетесь сказать «объявить это как глобальную переменную», например window.moveIt ... но IE не играет в эту игру, он просто отбросит ее обратно:)

---

Также есть еще одна IE <9 проблема, <code>.wrapAll('<article/>') ... поскольку IE не поддерживает этот элемент, вы не можете использовать его здесь, вам понадобится что-то вроде html5shiv , чтобы получить работающие старые версии IE.

Answer 2

Я использую IE9 и его инструменты для разработчиков.Есть много нулевых / неопределенных переменных, попадающих в ловушку, когда я ловлю все ошибки.