jquery - 使用 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

工作 jsFiddle 演示

#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');