Question

I have a script that load content from another page into a div based on options in selectbox. I wounder if its possible to add a slide effect when the content gets loaded into the div.

The script looks like this:

$(document).ready(function(){ 
    $("#selectbox").change(function(){ 
    var selectedOption = $('#selectbox :selected').val(); 
    $containerDiv = $('#div_that_recieves_content'); 
    $containerDiv.html("");
            switch (selectedOption)
            {
            case "Option1":$containerDiv.load( "page.html #div" , function(){$(document).trigger("reload");});break;
            case "Option2":$containerDiv.load( "page.html #div" , function(){$(document).trigger("reload");});break;
            case "Option3":$containerDiv.load( "page.html #div" , function(){$(document).trigger("reload");});break;
            }
    return true;
    }); 
});

Thanks.

Answer 1

The callback of load() fires when the new content is available. You could hide container before the AJAX, and slide it down once AJAX is complete

$containerDiv.html("").hide();

Then in switch you would do better to only use cases to define URL, and only call load() once:

var url;
switch (selectedOption) {
        case "Option1": url= "page.html #div";break;
        case "Option2": url= "page.html #div";break;
        case "Option3": url="page.html #div" ;break;
}

$containerDiv.load( url , function(){
    /* new content exists, can display it now*/
     $(this).slideDown();
     /* no idea what "reload" does.. if it affects "$containerDiv" may need to do slideDown in that handler*/
     $(document).trigger("reload");

});