javascript - 加载内容到div，加载时滑动内容

Question

我有一个脚本，可以根据选择框中的选项将另一个页面的内容加载到 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;
    }); 
});

谢谢。

Answer 1

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

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

然后在 switch 中你最好只用用例来定义 URL，并且只调用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");

});