I want to fade-in my text using jquery. I've set everything up, but it doesn't seem to work. Perhaps someone can help me with this problem? This is what I have:

```
.nav ul li {
opacity: 0;
padding: 0px 50px;
transition: opacity 2s ease-in; 
/* and some more transitions for other browsers */
}

.nav ul li.fade {
opacity: 1;
/* The problem is probably here: class inside of another class */
}

```

jquery:

```
$('ul.nav li').addClass('fade');

```

I hope someone can help me out. I do not know to fix this problem. I've looked up for some solutions, but I do not think they fix my problem. Thanks in advance.
Edit: I got this from an example from this website and was going to try it out.

Edit 2:
[fiddle](http://jsfiddle.net/J6PC9/):

```
<title>title</title>
<body>
<div id='container'>
        <div id='navLeft' class='nav'>
        <ul>
        <li>link1</li>
        <li>link2</li>
        </ul>
        </div>
        <div id='logo'>
        <img src='images/logo.png' alt='logo' />
        </div>
        <div id='navRight' class='nav'>
        <ul>
        <li>link3</li>
        <li>link4</li>
        </ul>
        </div>
</div>
</body>

```

My tags:

```
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script type='text/javascript' src="js/class.js"></script>

```