I have some jQuery that hides half a div that contains an image and after 3 seconds displays the full size of the image. It works great in FireFox and IE but not Chrome. Any ideas why?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<script src="jquery-1.6.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
var status = "closed";
var banner = jQuery.noConflict();
banner(document).ready(function () {
var sliderHalfHeight = "46px";
var sliderFullHeight = "86px";
// set at half height
banner('#banner').css('height', sliderHalfHeight);
var autoTimer = null;
autoTimer = setTimeout(function () {
banner("#banner").animate({ height: sliderFullHeight }, 'slow');
autoTimer = setTimeout(function () {
banner("#banner").animate({ height: sliderHalfHeight });
}, 5000);
}, 2000);
banner("#open").click(function () {
if (status == "closed") {
banner("#banner").animate({ height: sliderFullHeight });
if (autoTimer) clearTimeout(autoTimer);
autoTimer = null;
status = "open";
}
else {
banner("#banner").animate({ height: sliderHalfHeight });
if (autoTimer) clearTimeout(autoTimer);
autoTimer = null;
status = "closed";
}
});
});
</script>
</head>
<body>
<div id="banner" style="overflow: hidden;">
<img src="banner.jpg" runat="server" />
</div>
<div id="open">Open/Close</div>
</body>
</html>
Seems to working just fine in Chrome for me, try this Fiddle : http://jsfiddle.net/HNpwB/