预期价值结束但发现'0.1'。解析“不透明度”的值时出错。宣言被撤销

Question

当尝试使用setTimeout（）函数随时间更改元素的opacity属性时，我遇到了一个奇怪的错误（在问题的标题中）。有趣的是，我之前已经成功地完成了这个目标，没有任何错误：（http://www.public.asu.edu/~drwarner/imageslider/fading_Banner.html），但我仍然无法在此处工作：（http://www.public.asu.edu/~drwarner/imageslider/scrolling_Banner.html）。我真的没有想到会发生什么，所以这里的代码是失败的：

<script>
    var images = [];
    var imagePosition = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    var cycle;
    var hoverImagePosition;
    var container;
    var c;


    window.onload = function scrolling() {
        for (i = 0; i < 10; i++) {
            images.push(document.getElementById("scrollingImage" + i));
            if (document.addEventListener) {
                // For all major browsers, except IE 8 and earlier
                document.getElementById("scrollingImage" + i).addEventListener("mouseenter", imageBigger);
                document.getElementById("scrollingImage" + i).addEventListener("mouseleave", imageSmaller);
            } else if (document.attachEvent) {
                // For IE 8 and earlier versions
                document.getElementById("scrollingImage" + i).attachEvent("mouseenter", imageBigger);
                document.getElementById("scrollingImage" + i).attachEvent("mouseleave", imageSmaller);
            }
        }
        container = document.getElementById("container");
        container.style.opacity = 0;
        imageAppear();
        scrollImages = setInterval(frame, 100);
    };


    function imageAppear(){
        setTimeout(function(){
            if(container.style.opacity < 1){
                container.style.opacity = container.style.opacity + .1;
                imageAppear();
            }                
        }, 10);     
    }




    function frame() {
        for (x = 0; x < 10; x++) {
            if (imagePosition[x] == 100) {
                imagePosition[x] = 0;
            } else {
                imagePosition[x] = imagePosition[x] + 1;
                images[x].style.left = imagePosition[x] + '%';
            }
        }
    }

    function imageBigger() {
        this.style.msTransform = "scale(1.1,1.1)";
        this.style.webkitTransform = "scale(1.1,1.1)";
        this.style.transform = "scale(1.1,1.1)";
        this.style.zIndex = 1;
        clearInterval(scrollImages);
    }

    function imageSmaller() {
        this.style.zIndex = 0;
        this.style.msTransform = "scale(1,1)";
        this.style.webkitTransform = "scale(1,1)";
        this.style.transform = "scale(1,1)";
        scrollImages = setInterval(frame, 100);
    }

</script>

这是我的代码在某种程度上工作但似乎非常相似：

<script type="text/javascript">
    var n = 0;
    var imageArray = [];

    window.onload = beginScroll;

    function beginScroll() {
        for (z = 0; z < 10; z++) {
            imageArray.push(document.getElementById("image" + z));
        }
        imageFade();
    }

    function imageFade() {
        for (x = 0; x < 10; x++) {
            imageArray[x].style.zIndex = 1;
            imageArray[x].style.opacity = 1;
            imageArray[x].style.MsFilter = "\"progid:DXImageTransform.Microsoft.Alpha(opacity=1)\"";
            imageArray[x].style.filter.alpha = 1;
            imageArray[x].style.MozOpacity = 1;
            imageArray[x].style.KhtmlOpacity = 1;
        }
        n = 0;
        frame();
    }

    function frame() {
        setTimeout(function() {
            if (n < 10) {
                if (imageArray[n].style.opacity == 0) {
                    imageArray[n].style.zIndex = 0;
                    n++;
                    frame();

                } else {
                    imageArray[n].style.opacity = imageArray[n].style.opacity - 0.01;
                    imageArray[n].style.MsFilter = imageArray[n].style.MsFilter - 0.01;
                    imageArray[n].style.filter.alpha = imageArray[n].style.filter.alpha - 0.01;
                    imageArray[n].style.MozOpacity = imageArray[n].style.MozOpacity - 0.01;
                    imageArray[n].style.KhtmlOpacity = imageArray[n].style.KhtmlOpacity - 0.01;
                    frame();
                }
            } else {
                imageFade();
            }
        }, 10);
    }

</script>