Looking for help with fading in text using jQuery. Despite setting everything up, it doesn't seem to be working. Can someone assist me with this issue? Here is my current code:
.nav ul li {
opacity: 0;
padding: 0px 50px;
transition: opacity 2s ease-in;
/* additional transitions for other browsers */
}
.nav ul li.fade {
opacity: 1;
/* Potential issue with a class inside another class */
}
jQuery snippet:
$('ul.nav li').addClass('fade');
I'm hoping that someone can provide some guidance on resolving this problem. I've searched for solutions but haven't found one that addresses my specific issue. Thanks in advance. Edit: This code was taken from an example on this website and I wanted to test it out.
Edit 2: Link to the fiddle:
<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>
Script 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>