Question

我刚刚开始探索jQuery（v1.4.2）并构建了一个用于自我教育的小型静态示例。

我在Linux平台上使用Firefox 3.6.9，Chromium 6.0.472.53和Opera 10.61。

我发现我的示例在Chromium和Opera上按预期工作，但是我在Firefox上发生了两次jQuery fadeIn非常烦人的闪烁行为。

我想知道是否有其他人遇到过同样的问题，或者是否有任何已知的解决方法。

以下是代码：

的index.html

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="mainDiv"></div>
</body>
</html>

main.js

function showA1()
{
  $.get("zh1.html", function(data){$("#mainDiv").html(data);});
}
function showB2()
{
  $.get("zh2.html", function(data){$("#mainDiv").html(data);});
}
function clickA1()
{
  $("#mainDiv").fadeOut(showB2);
  $("#mainDiv").fadeIn();
}
function clickB2()
{
  $("#mainDiv").fadeOut(showA1);
  $("#mainDiv").fadeIn();
}
function executeWhenReady()
{
  showA1();
}
$(document).ready(executeWhenReady);

zh1.html

<div>Button A1</div><a href="javascript:clickA1();"><button id=A1>First button</button></a>

zh2.html

<div>Button B2</div><a href="javascript:clickB2();"><button id=B2>Second button</button></a>

Answer 1

我倾向于怀疑这个问题与Firefox本身有关，而是你可能只是在Firefox中注意到它。我认为问题可能是你的$ .get调用和.fadeIn（）的计时问题。要记住的事情......

$("#mainDiv").fadeOut(showA1);
$("#mainDiv").fadeIn();

这两行排队两个函数--fadeOut然后fadeIn。但是，您正试图将内容切换到中间位置。

淡出 - ＆gt;带来新内容 - ＆gt;将其淡化为

您未考虑的是引入新内容需要时间。我建议你重构这样的事情。

function showA1()
{
  $.get("zh1.html", function(data){
    var $blk = $("#mainDiv");
    $blk.html(data);
    // only try to fadeIn the container if it's hidden (as it won't be hidden on initial page load when you call showA1)
    $blk.is(':hidden') && $blk.fadeIn();
  });
}
function showB2()
{
  $.get("zh2.html", function(data){
    $("#mainDiv").html(data).fadeIn();
  });
}
function clickA1()
{
  $("#mainDiv").fadeOut(showB2);
}
function clickB2()
{
  $("#mainDiv").fadeOut(showA1);
}

这使得fadeIn操作在#mainDiv的html更改之后才排队。

jQuery：在Firefox中重复（不需要的）淡入/淡出

1 个答案: