jQuery不会在IE上运行,普通JS也不会

时间:2018-08-09 03:49:59

标签: javascript jquery internet-explorer animation internet-explorer-11

使用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自己检查网站,然后在“我们的服务”下,框从右到左滑动。

谢谢大家。

0 个答案:

没有答案