[jQuery] fadeOut() not working
I've created a script to fade out 2 DIV's and then fade in 2 new
DIV's.
The script works perfectly in IE, but Chrome and Firefox won't do the
fadeout. I know there isn't a problem with my code, because if I
replace the fadeout with hide, then the elements are hidden by the
browser and everything seems fine.
Is there any reason why the fadeout wouldn't work?
<script type="text/javascript">
var max_portfolio_sections = 2;
var current_section = 0;
function hideAllSections() {
i = 1;
while (i <= max_portfolio_sections) {
$('#portImgWrap-' + i).fadeOut();
$('#portTextWrap-' + i).fadeOut();
i++;
}
}
function fadeIn(id) {
$('#portImgWrap-' + id).fadeIn("slow");
$('#portTextWrap-' + id).fadeIn("slow");
current_section = id;
setTimeout("portfolioAction();",3000);
}
function portfolioAction() {
if (current_section > 0) {
$('#portImgWrap-' + current_section).hide();
$('#portTextWrap-' + current_section).hide();
}
new_section = current_section + 1;
if (new_section > max_portfolio_sections) new_section = 1;
setTimeout("fadeIn(new_section);",0);
}
hideAllSections();
portfolfioAction();
</script>