Question

I am having a little trouble achieving a very simply fade effect using CSS3. Here is my scenario:

I have a list a with some content in it. I also have some links, that when clicked filter the content in the list. What I would like is, when the page loads the list fades in, and every time the list is filtered, the list should disappear and than fade in with the new content.

I got the fade in on pageload working. However when I try to get the list to disappear and fade in again, I cant get that to work.

Here is a jsfiddle I created to demonstrate what I am trying to do. – http://jsfiddle.net/YeKX2/28/

Any help on this is appreciated.

Answer 1

Keeping it primarily webkit based and not using jQuery as you seem to be, you could do the following to achieve your goals:

function test(){
    document.getElementById('list').style.opacity = "0";
    setTimeout("document.getElementById('list').style.opacity = '1';",2000);
}

You’ll have to play around with the timing.

Also, to note, if you want to effect the timing of the -webkit-transition, you can use the following syntax.

document.getElementById('list').style['-webkit-transition'] = "opacity 2s linear";