在opacity = 0后加载html

我有这个代码。 不透明度0和不透明度1有效！ 但负载（pagina）不加载。 为什么？

function cargarContenido(pagina) { $('#content').animate({"opacity":"0"}); if ($('#content').css('opacity') == 0) { $("#content").load(pagina); } $('#content').animate({ "opacity": "1" }); } 

如果我只放这个，它工作正常

 function cargarContenido(pagina) { $("#content").load(pagina); } 

Answer 1

您需要使用animate和load方法的回调参数来按顺序执行代码。 试试这个：

 function cargarContenido(pagina) { $('#content').animate( { "opacity": "0" }, function() { $("#loadimage").show(); // show a loading image // load content when opacity = 0 animation finished $("#content").load( pagina, function() { $("#loadimage").hide(); // hide a loading image // make opacity = 1 when content has been loaded $('#content').animate({ "opacity": "1" }); } ) } ); } 

注意我已经扩展了此代码的格式，以明确发生了什么。 如果需要，您可以删除大量间距以缩短间距。

Answer 2

animate()是异步的，所以当你检查不透明度时它不是零，因为animate函数还没有完成。 在不透明度完成动画制作后，您可以在动画中使用回调来执行相同的操作：

 function cargarContenido(pagina) { $('#content').animate({"opacity":"0"}, function() { $(this).load(pagina, function() { $(this).animate({ "opacity": "1" }); }); }); } 

Answer 3

我想你想要做的是在#content的不透明度为0之后加载任何“pagina”？ 您应该使用complete参数而不是询问不透明度是否为0：

function cargarContenido（pagina）{

 $('#content').animate({"opacity":"0"}, 1000, function(){ $("#content").load(pagina, function(){ $('#content').animate({ "opacity": "1" }); }); }); 

}

Answer 4

我认为你应该在回调函数中完成动画后完成这些工作，因为它将在完成动画后运行。 阅读有关completefunction的文档 ，

  $('#content').animate({"opacity":"0"},500,function(){ $("#content").load(pagina,function(){ $('#content').animate({ "opacity": "1" }); }); }); 

Answer 5

尝试使用animate的其他参数：

 $('#content').animate({"opacity":"0"}, slow, function() { $("#content").load(pagina); $('#content').animate({ "opacity": "1" }); });