两个动画同时出现答案

【问题标题】：Two animations at exact same time两个动画同时出现
【发布时间】：2014-07-17 10:34:10
【问题描述】：

我正在尝试在两个背景之间进行过渡：

$(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 div 附加到#bg 并使用backstretch 设置背景图像。然后，它通过将第一个背景向左移动来为第一个背景设置动画，而第二个背景从右侧进入。

代码工作得很好，除了在过渡期间两个背景之间有一个白色间隙。这可能是因为 bg1 在 bg2 之前获得动画效果。

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

（queue: false 取自对同一问题的回答，但在我的情况下绝对行不通）

【问题讨论】：

你能不能把两个绝对定位的背景都包装在一个包装器 div 中，然后只为一个包装器 div 设置动画以向左滑动，然后从包装器 div 中删除旧背景？这意味着只有一个动画正在播放，因为它们都向左滑动完全相同的距离。
@Mark 是的！这就是我最终要走的路。结果变得更容易，也更少混乱
该死！我知道我应该把它写下来作为答案。为一个基本动作制作两个动画似乎有点疯狂。告诉我，在结束时或破坏旧背景时是否有任何跳跃？我有点担心这种方法会发生类似的事情，但如果它工作得足够顺利，我可能会在我正在进行的项目中尝试这个。
@Mark 在我的情况下，我只是没有破坏其他背景。我的页面的背景是一种“地图”，当用户单击链接时，背景会移动到“地图”上的一个点。所以我更容易将几个背景图像粘贴到一个包装器中并沿着它滚动，而不会破坏单个背景图像。所以我从来没有遇到过销毁它们的问题。但是我要指出，我在调整窗口大小时仍然遇到问题（偶尔调整单个图像的大小会偏离几个像素，烦人......）
我很想知道当你解决它时（如果你解决了它），调整大小问题最终会出现什么问题。我以前从未真正遇到过调整大小的问题。

标签： jquery animation

【解决方案1】：

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

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

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

【讨论】：

这实际上可能是尽可能接近，即使真正同时执行它们是不可能的。
感谢您的回答，但如果您查看我的代码，您会发现我已经拥有queue: false，而且我还指出，我也是从您指向我的同一篇文章中获取的！您本可以阅读完整的问题，但还是谢谢您！ :)

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

JavaScript 是单线程的，因此您一次只能执行一个函数。也就是说，这两个动画不能并行执行。

【讨论】：

不正确，动画不一定要完成你只是不能保证它们同时被添加到事件循环中。
我的意思是回调只能执行一次，所以一个回调必须在下一个回调开始之前完成。
我认为我们同意 - 启动动画的回调必须在调用下一个动画的回调之前完成，但是动画本身不必为循环完成 continue（那里不是每个动画之间有 500 毫秒的延迟）。
是的，这是有道理的。

【解决方案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);

    });

});

【讨论】：