Hi, I've got some code that loads content into a div dependent on which menu item is clicked. However, when I'm getting the new content to fade in, sometimes it hasn't finished loading, so the old content fades back in, then flicks over to the new content. How would I use queue() in this context to get the content to finish loading first before it fades back in? I've tried to do it, but it just ends up with a weird flashing effect. Any help would be much appreciated!! Thanks!
- <div id="menu">
- <ul>
- <li><a href="#" class="menu-linka" data-remote-url="home.html">HOME</a></li>
- <li><a href="#" class="menu-linkb" data-remote-url="about.html">ABOUT</a></li>
- <li><a href="#" class="menu-linkc" data-remote-url="gallery.html">GALLERY</a></li>
- <li><a href="#" class="menu-linkd" data-remote-url="contact.html">CONTACT</a></li>
- </ul>
- <script>
- $('.menu-linka').click(function(){
- $("#words").fadeOut('400',function(){
- $("#words").load('home.html')
- $("#words").fadeIn('600');
- })})
- </script>
- <script>
- $('.menu-linkb').click(function(){
- $("#words").fadeOut('400',function(){
- $("#words").load('about.html')
- $("#words").fadeIn('600');
- })})
- </script>
- <script>
- $('.menu-linkc').click(function(){
- $("#words").fadeOut('400',function(){
- $("#words").load('gallery.html')
- $("#words").fadeIn('600');
- })})
- </script>
- <script>
- $('.menu-linkd').click(function(){
- $("#words").fadeOut('400',function(){
- $("#words").load('contact.html')
- $("#words").fadeIn('600');
- })})
- </script>
- </div>
- <div id="content">
- <div id="words">
- <script>
- $('document').ready(function(){
- $("#words").fadeOut('300',function(){
- $("#words").load('home.html')
- $("#words").fadeIn('400');
- })})
- </script>
- </div>
- </div>