Question

My site uses a $.get function to send data provided by a link to a PHP script which retrieves data from a database and echos that data back to the $.get function which then uses a .html(data) function to fade in the data and present it in a div.

$(document).ready(function() {
    $('.topNavLink').click(function() {
        $.get('/view/scripts/data.php', { 'page' : $(this).text() }, function(data) {
            $('#contents').fadeOut(100, function() {
                $('#contents').html(data).fadeIn(100)
            });
        });
    });
});

.topNavLink is of course the class for every link in the navigation menu, and the function reads the text between the link’s tags to find the name of the page.

I have a <div id='#loading'> which is initially hidden by the CSS with opacity:0. I wish to use a .fadeIn(100) function to fade in the div when a .topNavLink is clicked, then call the code above loading the contents of the page and finally fade out the div.

I’ve tried calling the div fadeIn before the $.get like so:

$('.topNavLink').click(function() {
    $('#loading').fadeIn(100);
    $.get('/view/scripts/data.php', { 'page' : $(this).text() }, function(data) {
...

I’ve tried using the fadeIn’s callback option like so:

$('.topNavLink').click(function() {
    $('#loading').fadeIn(100, function() {
        $.get('/view/scripts/data.php', { 'page' : $(this).text() }, function(data) {
...

But eventually it ends up not showing the div or not loading the contents.

What am I doing wrong (and hopefully my intention is clear and you know what I’m trying to accomplish)?

Answer 1

I think you should not hide the #loading div with opacity:0 but with display:none for fadeIn to work.