淡入淡出與CSS3的過渡元素

Question

我有一個div在我的身體

<div id="one" style="background-image: url(img/1.png)"></div> 

當事件觸發它應該做到以下

if(dragLeft < 270 && dragTop < 230) { 
    $('#one').addClass('header_out'); 
} else { 
    $('#one').removeClass('header_out').addClass('header_in'); 
} 

的淡化效果IVE取得

.header_out { 
    opacity: 0.2; 
    transition: opacity .55s ease-in-out; 
    -moz-transition: opacity .55s ease-in-out; 
    -webkit-transition: opacity .55s ease-in-out; 
} 

.header_in { 
opacity: 1; 
transition: opacity .55s ease-in-out; 
-moz-transition: opacity .55s ease-in-out; 
-webkit-transition: opacity .55s ease-in-out; 
} 

但unfortanetly身份證不工作。我有2班，將不透明度降低到0.2，然後回到1.希望你明白我的觀點！

Answer 1

Working jsFiddle Demo

添加過渡到#one元素：

#one { 
    width: 400px; 
    height: 400px; 
    transition: opacity .55s ease-in-out; 
    background: red; 
} 

.out { opacity: 0; } 
.in { opacity: 1; } 

而在你的jQuery：

// fade out 
$('#one').addClass('out').removeClass('in'); 

// fade in 
$('#one').addClass('in').removeClass('out');