使用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');
}

我的褪色效果

.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;
 }

但不幸的是，id不起作用。我有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');