Javascript Chrome、Firefox和Opera中的CSS转换问题，但IE除外

在我的web应用程序中，我想设置两个元素之间切换的动画。旧元素应该通过向左滑动并同时淡出而消失，然后新元素通过从右侧滑入并淡入而出现

请看这把小提琴：

我正在尝试为动画使用CSS转换。在第一次迭代中，一切都正常工作，但是一旦一个元素被隐藏一次，出现的元素的转换就会停止工作：出现的元素只是捕捉进来，没有任何运动或褪色

我在Chrome、Opera Next和Firefox中遇到了这个问题，但在IE10中没有。是我做错了什么，还是除了IE（一个最奇怪的概念）之外，这在所有浏览器中都是一个bug

这个问题似乎与

show（）

/

hide（）

有关，因为如果我将元素设置为

position:absolute

并删除

show（）

/

hide（）

调用，就不会有问题

JavaScript:

var currentDiv = "div2";

$(function(){
    $('#btn').click(function(){
        var newDiv = currentDiv == 'div1' ? 'div2' : 'div1';
        var oldDiv = currentDiv;

        // Start transition for the disappearing div
        $('#' + oldDiv).css({ opacity: 0, left: -100 });

        // Prepare the new div for showing by first moving it to the right
        // There will be a transition here as well, but it won't be visible
        $('#' + newDiv).css({ opacity: 0, left: +100 });

        setTimeout(function(){
            // Once the transition is done, hide the div so it doesn't occupy space
            $('#' + oldDiv).hide();
            // Show the new div and immediately start its appearing transition
            $('#' + newDiv).show().css({ opacity: 1, left: 0 });
        }, 1000);

        currentDiv = newDiv;
    });    
});

CSS:

HTML:

你好，这是一些文字
这里还有一些文字

设置元素动画时存在问题，这些问题从属性display:none开始。 等待show（）的完整回调，然后设置css属性

$('#' + newDiv).show(400, function(){
$(this).css({ opacity: 1, left: 0 });
});

---

有关详细信息，请参阅文档：

您可以从一个类切换到另一个类，或者在jQuery..CSS（）中添加/刷新转换CSS规则。。。规则中也缺少px单元？在设置以显示开始的元素的动画时也存在问题：无；尝试先显示元素，然后设置动画that@GCyrillus是的，我考虑过在不同的班级之间切换，但还没有尝试过。但是，我想了解我上面所做的是否有根本性的错误？@Haroldchen感谢您提供的信息，但这不是我在这里所做的：

$（'#'+newDiv）.show（）.css（{opacity:1，left:0}）？使用px单位和围绕css规则/值的引号，它可以工作
<div id="div1" class="myDiv" style="display:none">
    hello, this is some text
</div>
<div id="div2" class="myDiv" style="display:none">
    and here is some more text
</div> 

$('#' + newDiv).show(400, function(){
$(this).css({ opacity: 1, left: 0 });
});