Question

朋友您好我的索引中包含此代码：

<script>
$(".myLink").click(function(){
  var href = $(this).attr('href');
  $('#container').load(href);
  $('#container').fadeTo( 500, 1);
  $("html, body").animate({ scrollTop: 0 }, "normal");
  return false;
});
</script>

它有效。接下来，当#container打开并加载了其内容时，我需要关闭它，所以我在#container窗口中使用以下代码：

$("#container").click(function(){
  $('#container').fadeTo( 500, 0 );
  var href = $('cont_nota').attr('href');
  $("#container").empty();
  $(this).unbind( fadeTo );
  event.preventDefault();
});

再一切一切都好，当我点击窗口中的任何位置时它会关闭#container（正如预期的那样），除了它没有淡出，它突然关闭，我可以忍受，但我真的在挣扎with is：当我尝试从#container中打开一个新链接时。它将新内容加载到自身（#container窗口），就像预期的那样，但现在它不会淡入，它会突然出现。

这是我用来将新内容加载到同一容器中的代码：

$(".link").click(function(){
  var href = $(this).attr('href');
  $("#container").html("");
  $('#container').load(href);
  $('#container').fadeTo( 500, 1);
  $("html, body").animate({ scrollTop: 0 }, "normal");
  return false;
  event.preventDefault();
});

任何可能出错的想法？感谢您的任何见解。

Answer 1

由于JS工作asynchronously，fadeTo函数不会阻止其他行的执行。因此，在执行第一行之后，您的代码立即开始执行其他行，而不是 fadeTo方法完成后。

因此，如果您想等待完成淡入淡出，则应该在回调函数中编写代码。以下是使用fadeTo函数并使用回调的documentation。

所以你的功能链应该是这样的：

$("#container").click(function(){
  $('#container').fadeTo( 500, 0, function() {
      var href = $('cont_nota').attr('href');
      $("#container").empty().css('opacity','100');
      $(this).unbind( fadeTo );
      event.preventDefault();
  });
});

jquery .load上的转换冲突

1 个答案: