我有一个脚本,可以根据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;
});
});
感谢。
答案 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");
});