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>

Here's the live site所以你可以看到我的意思。任何帮助将不胜感激。

Answer 1

在声明var时，您错过了moveIt = $('#thumb-wrap').outerWidth(); .... IE对此并不十分宽容，最好始终明确声明您的变量。它应该看起来像：

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

不使用var你尝试说“将此声明为全局变量”，例如window.moveIt ...但IE不玩那个游戏，它只会把它扔回给你：）

此外，还有另一个 IE＆lt; 9问题，.wrapAll('<article/>') ...因为IE不支持这个元素你不能在这里原生使用它，你需要像html5shiv让这个旧的IE版本工作。

Answer 2

我正在使用IE9及其开发人员工具。当我捕获所有错误时，有很多空值/未定义的变量被捕获。

IE8杀死了我的Jquery脚本

2 个答案: