Javascript 动画在 IE 中不起作用

Question

我有一个小的 JavaScript 动画，在选择前一个下拉菜单后显示一个新的下拉选择菜单。

HTML 如下:

<div class="steps">
    <div id="step1">
            <button type="button" class="button standardBtn" style="opacity: 1.5" id="toJapanese" onclick="setToJapanese(); activatePullDown()">To Japanese</button>
            <button type="button" class="button standardBtn" style="opacity: 1.5" id="toWestern" onclick="setToWestern(); activatePullDown()">To Western</button>
    </div>
    <div id="step2" style="opacity: 0"></div>
    <div id="step3" style="opacity: 0"></div>
    <div id="step4" style="opacity: 0"></div>
</div>

当单击步骤 1 中的按钮时，将出现第一个菜单步骤 2。当选择步骤 2 中的某个项目时，它会移至左侧并显示新菜单步骤 3。它适用于除 IE(10 和 11)之外的所有浏览器。在IE中，step2正确移动，但step3无法显示。

这是我选择第 2 步时的 Javascript。

function yearSelected() {
    startMoveLeft('step3');
    getMonths();
    setTimeout(fadeIn, 600, 'step3', 'normal', 0);
}

function startMoveLeft(id) {
    var element = document.getElementById(id);

    var mq = window.matchMedia( "(min-width: 800px)" );

    var display = [];

    if (mq.matches) {
        display = 'inline-block';
    }
    else {
        display = 'block';
    }

    element.style.display = display;
    element.style.visibility = 'visible';
    element.style.width = '0px'; 

    doMoveLeft(element); 
}

function doMoveLeft(element) {
    console.log(element.style.width);
    if (parseInt(element.style.width, 10) < convertEmToPx(8)) {
        var width = parseInt(element.style.width) + 4 + 'px';
        element.style.width = width;
        setTimeout(function() {
            doMoveLeft(element);
        }, 1);
    }
}

function getMonths() {
    var xmlhttp = createXmlhttp();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById('toJapanese').className += ' activeButton';
            document.getElementById('toWestern').className += ' unactiveButton';
            document.getElementById('step3').innerHTML = xmlhttp.responseText;
        }
    };

    var year = document.getElementById("yearSelect").value;
    var token = document.getElementsByTagName('input').item(name = "_token").value;
    var data = "_token=" + token + "&year=" + year;

    xmlhttp.open("POST", "ajax/getMonths", true);
    xmlhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send(data);
}

function fadeIn(id, time, fade) {
    var element = document.getElementById(id);
    if (element.style.opacity < 1) {
        FX.fadeIn(element, {
            duration: setDuration(time)
        }, fade);
    }
}

function setDuration(time) {
    if (time === 'very_fast') {
        return 200;
    }
    else if (time === 'fast') {
        return 400;
    }

    else if (time === 'normal') {
        return 600;
    }

    else if (time === 'slow') {
        return 800;
    }

    else if (time === 'very_slow') {
        return 1000;
    }

    else {
        return 0;
    }
}

(function() {
    var FX = {
        easing: {
            linear: function(progress) {
                return progress;
            },
            quadratic: function(progress) {
                return Math.pow(progress, 2);
            },
            swing: function(progress) {
                return 0.5 - Math.cos(progress * Math.PI) / 2;
            },
            circ: function(progress) {
                return 1 - Math.sin(Math.acos(progress));
            },
            back: function(progress, x) {
                return Math.pow(progress, 2) * ((x + 1) * progress - x);
            },
            bounce: function(progress) {
                for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
                    if (progress >= (7 - 4 * a) / 11) {
                        return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
                    }
                    return 0;
                }
            },
            elastic: function(progress, x) {
                return Math.pow(2, 10 * (progress - 1)) * Math.cos(20 * Math.PI * x / 3 * progress);
            }
        },
        animate: function(options) {
            var start = new Date();
            var id = setInterval(function() {
                var timePassed = new Date() - start;
                var progress = timePassed / options.duration;
                if (progress > 1) {
                    progress = 1;
                }
                options.progress = progress;
                var delta = options.delta(progress);
                options.step(delta);
                if (progress == 1) {
                    clearInterval(id);
                    options.complete;
                }
            }, options.delay || 10);
        },
        fadeOut: function(element, options, to) {
            if (to === undefined) {
                to = 1;
            }

            this.animate({
                duration: options.duration,
                delta: function(progress) {
                    progress = this.progress;
                    return FX.easing.swing(progress);
                },
                complete: options.complete,
                step: function(delta) {
                    element.style.opacity = to - delta;
                }
            });
        },
        fadeIn: function(element, options, to) {
            if (to === undefined) {
                to = 0;
            }
            if (element.style.opacity === 0) {
                to = 0;
            }
            this.animate({
                duration: options.duration,
                delta: function(progress) {
                    progress = this.progress;
                    return FX.easing.swing(progress);
                },
                complete: options.complete,
                step: function(delta) {
                    element.style.opacity = to + delta;
                }
            });
        }
    };
    window.FX = FX;
})();

我已经单独测试了这些功能，它们工作正常，但组合起来有些地方不对。我真的很感激一些见解。

更新:这与 AJAX 请求有关。它没有获取 _token 值。此行似乎导致了问题:

document.getElementsByTagName('input').item(name = "_token").value;

Answer 1

item HTMLCollection 的函数采用整数参数(索引)，而不是 CSS 选择器(无论如何，您不能传递这样的选择器)。您可能想说的是:

var token = document.querySelector("input[name='_token']").value;