CODEWITHSUNDEEP
javascriptjqueryhtmlcss
alias51
alias51

Reputation: 8598

How to use CSS3 transitions

I have the following HTML:

<div id="welcome-content">
 // Code
</div>
<div id="configure-content" style="display:none">
 // Code
</div>

And (working) jquery that toggles between them:

$('.back-welcome').click(function(){
$('#welcome-content').toggle();
$('#configure-content').toggle();        
});

I want to use CSS3 to create a fade effect as I toggle between them. I have tried the following:

#welcome-content, #configure-content{
    -webkit-transition: all 400ms;
    -o-transition: all 400ms;
    -moz-transition: all 400ms;
    -ms-transition: all 400ms;
    -khtml-transition: all 400ms;
}

However, no animation takes place. What am I doing wrong?

Upvotes: 5

Views: 156

Answers (2)

DaniP
DaniP

Reputation: 38252

The property display that assign the method toggle () can't be animated with the CSS transitions. Maybe you want to look at fadeIn() and fadeOut().

Edit

I've found this another method fadeToggle() i don't know much about it but you can search and use this:

$('.back-fade').click(function(){
  $('#welcome-content').fadeToggle(2000);
  $('#configure-content').fadeToggle(2000);        
});

Check this demo http://jsfiddle.net/8urRp/14/ *

*I made the divs with absolute position to keep them on the same space

Upvotes: 4

Arnold Daniels
Arnold Daniels

Reputation: 16553

There can only be a transition for a CSS property from one value to another. For a fade transition, the opacity should go from 0 to one.

CSS

.foo {
   opacity: 0;
   transition: all 400ms;
}
.foo.active {
   opacity: 1
}

JavaScript

$('.mybtn').click(function() { $('.foo').toggleClass('active'); })

See this fiddle

Now there is an annoying thing with showing an hiding elements using with CSS transitions. The transition from display: none to display: block is instant, canceling out all other transitions.

There are several ways around this. First you can just use the jQuery fadeOut function. If you do really insist in using CSS transitions have a look at this answer.

Upvotes: 1

Related Questions