Javascript 如何显示：过渡上的块效果：不透明度？

我有两个div。一个显示，另一个隐藏（使用display:none）。 当我点击第一个div时，它应该会慢慢消失（使用transition:opacity创建），然后使用javascript的setTimeout让它显示：none，然后在那个时候放置第二个div display:block并添加他类（使用transition:opacity使他可见）。 问题是：为什么第一个div具有所需的效果（慢慢消失），而第二个div紧接着显示（在这种情况下过渡效果不起作用）

HTML

Js

例如： 谢谢。

您应该编写

fadeIn（1000）

而不是

css（'display'，'block'）

现在检查解决方案：

试试这个：

$('.red').click(function(){
        $(this).animate({opacity: 0}, 'slow', function(){
            $(this).hide();
            $('.blue').animate({opacity: 1}, 'slow', function(){
                  $(this).show();
            });
        });
    });

---

这是否有助于

$（'.blue'）.show（500）这可能是浏览器问题，因为我使用的是IE8浏览器。没有任何解释吗？@hicurin，谢谢，我知道这个解决方案，但它对我没有帮助。我没有使用它的主要想法是：我需要尽可能使用最大的css来制作所有效果（显示和隐藏），因为所有的js代码都很可能会被更改。我只需要模拟一个场景，红色的div消失了，蓝色的div出现了，然后慢慢地显示出来。还有一个示例jsfiddle.net/y7cX2/6/，这里再次立即显示蓝色div。所以我的问题可能是，在div出现在DOM中之后，如何缓慢地显示它？
.square{
    opacity:0;
    transition: opacity 1s linear;
}
.square.show{
    opacity:1;
    transition: opacity 1s linear;
}
.red{
    background-color:red;
}
.blue{
    background-color:blue;
}

$('.red').click(function(){
        $(this).removeClass('show');
        setTimeout((function(p){return function(){
            $(p).css('display', 'none');
            $('.blue').css('display', 'block').addClass('show');
        }})(this), 1000); 
    });

$('.red').click(function(){
        $(this).animate({opacity: 0}, 'slow', function(){
            $(this).hide();
            $('.blue').animate({opacity: 1}, 'slow', function(){
                  $(this).show();
            });
        });
    });