【问题标题】:jQuery animation script runs only first animation function in IEjQuery 动画脚本只在 IE 中运行第一个动画函数
【发布时间】:2013-07-27 15:54:44
【问题描述】:

所以我有这个 Javascript 代码块(见下文),它适用于 Firefox、Chrome 和 Safari。在 IE 中,它运行第一个动画function $(".slide1_background").animate({ yada yada yada,然后什么也没有。我尝试在它之后发出警报,但它也不会触发。

背景图片有一个单独的滑块脚本。这是一个 Joomla 模块。

网站位于here

谁能解释一下这种情况?

$(window).load(function() {
    swap();
});

function swap() { //INITIAL LOAD AND SLIDE
    window.setTimeout(function() {
        $(".slide1_background").animate({
            left: '-=1973',
            opacity: '1',
            display: 'block'
        }, 1000, 'easeOutBack');

        $(".slide1_text").animate({
            left: '-=1973',
            opacity: '1',
            display: 'block'
        }, 1000, 'easeOutBack', function() {
            $(".slide2_background").css("left","960px");
            $(".slide2_text").css("left","493px");
            slideInSlide2();
        });
    }, 9000);
};

function slideInSlide2() {
    //BEGINNING OF LOOP
    $(".slide2_background").animate({
        left: '-=468',
        opacity: '1',
        display: 'block'
    }, 1000, 'easeOutBack', function() {

    });

    window.setTimeout(function() {      
        $(".slide2_text").animate({
        left: '-=468',
        opacity: '1',
        display: 'block'
    }, 1000, 'easeOutBack', function() {
        slideOutSlide2();
    });
}, 200);
}

function slideOutSlide2() {
    window.setTimeout(function() {
        $(".slide2_background").animate({
            left: '-=1973',
            opacity: '1',
            display: 'block'
        }, 1000, 'easeOutBack', function() {

        });

    $(".slide2_text").animate({
        left: '-=1973',
        opacity: '1',
        display: 'block'
    }, 1000, 'easeOutBack', function() {
        $(".slide3_background").css("left","960px");
        $(".slide3_text").css("left","960px");
        slideInSlide3();
    });
}, 6800);
};

function slideInSlide3() {
$(".slide3_background").animate({
    left: '-=468',
    opacity: '1',
    display: 'block'
}, 1000, 'easeOutBack', function() {

});

window.setTimeout(function() {
    $(".slide3_text").animate({
        left: '-=468',
        opacity: '1',
        display: 'block'
    }, 1000, 'easeOutBack', function() {
        slideOutSlide3();
    });
}, 200);
}

    function slideOutSlide3() {
        window.setTimeout(function() {
            $(".slide3_background").animate({
            left: '-=1973',
            opacity: '1',
            display: 'block'
        }, 1000, 'easeOutBack', function() {

        });

        $(".slide3_text").animate({
            left: '-=1973',
            opacity: '1',
            display: 'block'
        }, 1000, 'easeOutBack', function() {
            $(".slide1_background").css("left","960px");
            $(".slide1_text").css("left","960px");
            slideInSlide1();
        });
    }, 6800);
};

function slideInSlide1() {
    $(".slide1_background").animate({
        left: '-=468',
        opacity: '1',
        display: 'block'
    }, 1000, 'easeOutBack', function() {

    });

    window.setTimeout(function() {
        $(".slide1_text").animate({
            left: '-=468',
            opacity: '1',
            display: 'block'
        }, 1000, 'easeOutBack', function() {
            slideOutSlide1();
        });
    }, 200);
}

function slideOutSlide1() {
    window.setTimeout(function() {
        $(".slide1_background").animate({
            left: '-=1973',
            opacity: '1',
            display: 'block'
        }, 1000, 'easeOutBack', function() {

        });

        $(".slide1_text").animate({
            left: '-=1973',
            opacity: '1',
            display: 'block'
        }, 1000, 'easeOutBack', function() {
            $(".slide2_background").css("left","960px");
            $(".slide2_text").css("left","493px");
            slideInSlide2(); //LOOP AGAIN
        });
    }, 6800);
};

【问题讨论】:

    标签: jquery internet-explorer animation


    【解决方案1】:
     window.setTimeout.live(function() {
    

    试试看

    【讨论】:

    • 我假设它要么是语法问题,要么是使用 window.setTimeout 以外的东西,例如 window.setTimeout.live 但不是那样。 window.setTimeout.live 停止所有 easeOut 动画。甚至是第一个。一定有别的东西。
    猜你喜欢
    • 2020-09-29
    • 1970-01-01
    • 2014-08-26
    • 2010-11-25
    • 2016-05-28
    • 2014-09-29
    • 1970-01-01
    • 1970-01-01
    • 2018-04-21
    相关资源
    最近更新 更多