Question

我试图在两个背景之间进行转换：

$(document).ready(function() {

    // Set first background
    $('#bg .bg').backstretch( bg[0]['normal'], {speed: 0} );

    $('li').click(function() {
        var i = $(this).index();

        // Select first bg element
        var bg1 = $('#bg .bg:first-child');

        // Add second element
        $('#bg').append('<div class="bg" />');
        var bg2 = $('#bg .bg:nth-of-type(2)');
        $(bg2).css('left', '200%');;

        // Set second element background
        $(bg2).backstretch( bg[1]['normal'], {speed: 0} );

        // Move first background out
        $(bg1).animate({
            'left': '-100%'
        }, { duration: 500, queue: false });

        // Move second background in
        $(bg2).animate({
            'left': '0'
        }, { duration: 500, queue: false });
    });

});

我的绝对定位100％x100％背景的html是：

<div id="bg">
   <div class="bg"></div>
</div>

bg[x]['normal']只是包含图片路径的字符串。

简单地说，我的代码会向.bg添加一个新的#bg div，并使用backstretch来设置背景图像。然后，当第二个背景从右侧进入时，它会向左移动第一个背景，然后进行动画处理。

代码在转换期间两个背景之间存在白色差距的情况下工作得很好。这可能是因为bg1在bg2之前稍微有点动画。

如何确保这两个背景在同一时刻开始动画？

（queue: false取自对同一问题的回答，但在我的案例中肯定不起作用）

Answer 1

尝试将queue方法中的animate参数设置为false。

jQuery animate文档在此处解释了queue参数：http://api.jquery.com/animate/

这是另一个回答相同问题的StackOverflow帖子： How to run two jQuery animations simultaneously?

Answer 2

JavaScript是单线程的，因此您当时只能执行一个函数。意思是，这两个动画不能并行执行。

Answer 3

你这样做的方式尽可能接近。 JavaScript在单个事件线程中运行，因此您只能向该单个事件循环添加回调。您看到的轻微延迟是由于动画在稍微不同的时间添加到事件循环中 - 无法改变此行为。

您需要使用CSS，背景图层等来实现您想要的外观。

Answer 4

也许在$（document）.ready之前在包装函数中声明动画可能有所帮助，因为每次点击li时你都不必重新声明动画函数：

function FireBGAnims(bg1,bg2){
    // Move first background out
$(bg1).animate({
    'left': '-100%'
}, { duration: 500, queue: false });

// Move second background in
$(bg2).animate({
    'left': '0'
}, { duration: 500, queue: false });
}

$(document).ready(function() {

    // Set first background
    $('#bg .bg').backstretch( bg[0]['normal'], {speed: 0} );

    $('li').click(function() {
        var i = $(this).index();

        // Select first bg element
        var bg1 = $('#bg .bg:first-child');

        // Add second element
        $('#bg').append('<div class="bg" />');
        var bg2 = $('#bg .bg:nth-of-type(2)');
        $(bg2).css('left', '200%');;

        // Set second element background
        $(bg2).backstretch( bg[1]['normal'], {speed: 0} );

        FireBGAnims(bg1,bg2);

    });

});

两个动画在同一时间

4 个答案: