JQuery 动画不滑动/损坏

Question

首先，我对 javascript 或 jquery 并没有真正的经验，通常是插件或非常简单的手工代码（正如您即将看到的那样）。

Wat 我想要做很多次，但由于某种原因，我无法让它像我想要的那样工作。 我有几个问题。

我使用 .animation 将 2 个 div 滑入和滑出（2 个 div 彼此相邻，我希望它们滑入和滑出屏幕（例如 iphone 主屏幕）。

现在的问题是动画没有按预期工作，而不是滑开 div1 而在 div2 中沿着 div1 滑动时，div1 消失/缩小（向上和向左滑动）而不是“滑动到屏幕外”，然后div2 之后出现。 （所以滑动效果不起作用，div 隐藏和显示分开，而不是像 iphone 屏幕那样滑动）。

现在问题是我已经重新创建了设置并在那里进行了尝试，它按预期工作，如下所示：http://jsfiddle.net/dkeulen/2fHbz/

这就是我希望它工作的方式，但它并没有像这里显示的那样：（注意：它的工作正在进行中）http://jsfiddle.net/dkeulen/gQ9aE/2/ （右边中间的黑色方块是你需要点击的按钮）。

我可以在这里发布所有的 html 和 css 和 jquery，但它的发布量相当大...... 如果还需要什么，我当然可以提供。

作为代码，这是我用于滑动的部分：

$('.btnr').click(function(){
            $('#hosting').animate({'width' : '0px'}, 100).hide(600);
            $('#inexchange').animate({'width' : '100%'}, 600).show(600);
            $('.btnl').fadeIn(600);
            $('.btnr').fadeOut(600);
});

$('.btnl').click(function(){
            $('#hosting').animate({'width' : '100%'}, 600).show(400);
            $('#inexchange').animate({'width' : '0px'}, 600).hide(600);
            $('.btnl').fadeOut(600);
            $('.btnr').fadeIn(600);
});

我希望任何人都可以帮助我解决问题以及我必须采取的措施，在此先感谢！

Answer 1

最好指定一个 jsfiddle 让我们看到它的实际效果 我认为你的问题是 hide() 和 show() 没有堆叠在同一个动画队列中

所以解决这个问题的一种方法是使用promise ex.

$('.btnr').click(function(){
            promise1 = $('#hosting').animate({'width' : '0px'}, 100).promise();
            $.when(promise1).then(
                function(){
                   $('#hosting').hide();
                   $('#inexchange').animate({'width' : '100%'}, 600).show(600);
                   $('.btnl').fadeIn(600);
                   $('.btnr').fadeOut(600);
            });
});

另一个按钮也是如此。

检查我制作的这个简单的小提琴来演示它是如何工作的 http://jsfiddle.net/artmees/BCTxH/