I am just now beginning to explore jQuery (v1.4.2) and have constructed a small, static example for purposes of self-education.
I'm using Firefox 3.6.9, Chromium 6.0.472.53 and Opera 10.61 on the Linux platform.
I find that my example works as expected on Chromium and Opera, but I get a very annoying flickering behavior of jQuery fadeIn happening twice on Firefox.
I'm wondering if anyone else has experienced the same issue or if there are any known workarounds.
Here's the code:
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>