CODEWITHSUNDEEP
jqueryhtmlcss
supersize
supersize

Reputation: 14773

Fade in and out elements with css3's transition

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

for the fading effect ive made 

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

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!

Upvotes: 0

Views: 2596

Answers (1)

user1823761
user1823761

Reputation:

Working jsFiddle Demo

Add transition to your #one element:

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

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

And in your jQuery:

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

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

Upvotes: 1

Related Questions