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中的按钮时，将出现第一个菜单step2。选择步骤2中的项目后，它将向左移动，并显示新菜单step3。它适用于除IE（10和11）之外的所有浏览器。在IE中，step2正确移动，但step3无法显示。

当选择step2时，继续使用我的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

HTMLCollection的{{3}}函数采用整数参数（索引），而不是CSS选择器（无论如何都不能传递这样的选择器）。你可能想说这个：

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

Javascript动画无法在IE

1 个答案: