Question

我有两个div。一个显示，另一个隐藏（使用display：none）。当我点击第一个div它应该慢慢消失（使用转换：不透明度），然后使用javascript的setTimeout我使它显示：none并且在那时放第二个div显示：block并添加他的类（这使他可见过渡：不透明度）。问题是：为什么第一个div具有所需的效果（慢慢消失），而第二个div在此之后立即显示（过渡效果在这种情况下不起作用）。

HTML

<body style="border:1px solid black">   
    <div class="square red show" ></div>
    <div class="square blue" style="display:none"></div>
</body>

的CSS

.square{
    opacity:0;
    transition: opacity 1s linear;
}
.square.show{
    opacity:1;
    transition: opacity 1s linear;
}
.red{
    background-color:red;
}
.blue{
    background-color:blue;
}

的js

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

示例在这里：http://jsfiddle.net/y7cX2/ 感谢。

Answer 1

而不是css('display','block')你应该写fadeIn(1000) ..

立即检查解决方案：

http://jsfiddle.net/y7cX2/1/

Answer 2

试试这个：

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

如何显示：阻止过渡效果：不透明度？

2 个答案: