如何顯示：塊轉換效果：不透明度？

我有兩個div。顯示一個，隱藏其他（使用display：none）。當我點擊第一個div時，它應該慢慢消失（用transition：不透明度），然後使用javascript的setTimeout使其顯示：none並且在那個時候放置第二個div顯示：block並添加他class（這使他可見與過渡：不透明度）。問題是：爲什麼第一個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/ 感謝。

來源

2013-12-22 zhenetta

這是否有助於'$（ '藍色'。）.show（500）;' –

，而不是css('display','block')你應該寫fadeIn(1000) ..

檢查現在的解決方案：

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

來源

2013-12-22 07:47:00

這個演示不起作用..！ –

這是工作夥伴！請再次檢查它 –

這可能是瀏覽器問題，因爲我使用的是IE8瀏覽器。 –

試試這個：

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

來源

2013-12-22 07:53:30 HICURIN

沒有解釋？ – jfriend00

@hicurin，謝謝，我知道這個解決方案，但它不能幫助我。主要思想爲什麼我沒有使用它：我需要儘可能使用最大的CSS（顯示和隱藏）的所有效果，因爲所有的js代碼都很可能會被改變。我只需要模擬有紅色div的情況，它會消失，並在它的位置出現藍色div，並且它會緩慢顯示。還有一個例子jsfiddle.net/y7cX2/6/，這裏再次顯示藍色div。所以可能是我的問題應該是如何在DOM出現後緩慢顯示div？ – zhenetta

如何顯示：塊轉換效果：不透明度？

回答

相關問題