0

首先，我对 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);
});

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

4

1 回答 1

0

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

所以解决这个问题的一种方法是使用promiseex。

$('.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/

于 2013-09-17T12:03:52.897 回答