首页 > 解决方案 > jQuery 不会在 IE 上运行,普通的 JS 也不会

问题描述

在使用 jQuery 创建一段代码后,确保它可以在 chrome 上运行,我在 IE 上对其进行了测试,我意识到没有任何 jQuery 代码在其中运行。我试图通过将所有 jQuery 更改为 Pure JS 来解决这个问题。仍然,我没有得到任何结果。这里有没有人可以帮助我理解为什么 IE 如此脱离循环以及如何解决这个问题。这是给客户的,他们正在使用 IE。

所以代码是:

let Section5Run = true;
const myServices = $('.service-link');

function ServiceSlideIn(services, index = 0) {
if (services.length -1 < index) { return; }
    $(services[index]).css('transform', 'translateX(0%)');
    console.log("Section 5 occurance " + index);
    setTimeout(ServiceSlideIn, 500 , services, ++index);
}

//On Load Page
$(document).ready(function() {

    //When Window Is Scrolled
    $(window).scroll( function(){
        const MSOFFSET = $('.service-link')[0].clientHeight/2;

        var bottom_of_object = $('#section-5-box').offset().top + MSOFFSET;
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        if( bottom_of_window > bottom_of_object && Section5Run ){
            Section5Run = false;
            ServiceSlideIn(myServices);

        }

    });
});

然后它被转换成这样:

function ServiceSlideIn(services, index = 0) {
if (services.length -1 < index) { return; }
    services[index].style.transform = "translateX(0%)";
    console.log("Section 5 occurance " + index);
    setTimeout(ServiceSlideIn, 500 , services, ++index);
}

var cond = true;

document.addEventListener("scroll", function () {
    var wind = window.scrollY;
    var sec_5 = document.getElementById("section-5-box");
    var items = document.getElementsByClassName("service-link");
    var sec_off = offset(sec_5).top;
    console.log("rest");
    if (wind + (sec_5.clientHeight * 1.5) > sec_off && cond){
        console.log("Clients's top: " + sec_off);
        console.log("Client's Height is " + sec_5.clientHeight);
        console.log("Window's height: " + (wind + sec_5.clientHeight/3));
        console.log("items Length " + items.length);
        ServiceSlideIn(items);
        cond= false;
    }

});

function offset(el) {
    var rect = el.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}

非常基本的幻灯片动画在这里完成。

请自行检查网站cubeangle.com在我们的服务下,框将从右向左滑动。

谢谢你们。

标签: javascriptjqueryinternet-exploreranimationinternet-explorer-11

解决方案


推荐阅读