用css3的转换淡入和淡出元素 [英] Fade in and out elements with css3's transition

问题描述

我的身体有一个div

i have a div in my body

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

当事件触发时应执行以下操作

when an event fires it should do the following

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

但是unfortanetly id不工作。我有两个类，将不透明度淡化为0.2，然后回到1。希望你能得到我的观点！

but unfortanetly id doesnt work. i have 2 classes which fades the opacity to 0.2 and then back to 1. Hope you get my point!

推荐答案

工作jsFiddle演示

添加转换到 #one 元素：

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

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

在您的jQuery中：

And in your jQuery:

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

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

这篇关于用css3的转换淡入和淡出元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！