Question

Does anyone know how I can make this bit of code have a .fadein property? Preferably .fadein medium speed would be the best. Thanks!

<script>
function LinkOnClick4(box) {
$('#friendresults').load('conversation.php?id=' + box);
}
</script>

Answer 1

First hide the element, load it’s contents, and then use the callback function of the load function to fade it back in:

function LinkOnClick4(box) {

    //select our element to populate, hide it, load in the new content, then once the new content is loaded, fade it back in
    $('#friendresults').hide().load('conversation.php?id=' + box, function () {
        $(this).fadeIn(750);
    });
}

If you want the element to keep its space in the page (not totally disappear) then you can just set it’s opacity rather than using the .hide() and .fadeIn() functions:

function LinkOnClick4(box) {

    //select our element to populate, hide it, load in the new content, then once the new content is loaded, fade it back in
    $('#friendresults').css({ opacity : 0 }).load('conversation.php?id=' + box, function () {
        $(this).fadeTo(1, 750);
    });
}

The difference between the two code-blocks is that the first one will allow elements relatively positioned around the #friendresults element to shift when it’s hidden, and the second code-block keeps the page from shifting around when the #friendresults element is hidden/shown.

Some docs if you need more help:

• .hide(): http://api.jquery.com/hide
• .fadeIn(): http://api.jquery.com/fadein
• .fadTo(): http://api.jquery.com/fadeto
• .css(): http://api.jquery.com/css