将内容加载到div,加载时滑动内容

时间:2013-01-02 21:40:40

标签: javascript jquery

我有一个脚本,可以根据selectbox中的选项将其他页面中的内容加载到div中。如果可以在内容加载到div中时添加幻灯片效果,我会更加干净。

脚本如下所示:

$(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;
    }); 
});

感谢。

1 个答案:

答案 0 :(得分:1)

当新内容可用时,load()的回调会触发。您可以在AJAX之前隐藏容器,并在AJAX完成后将其向下滑动

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

然后在切换中,您最好只使用案例来定义网址,并且只调用load()一次:

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");

});