Hi everyone. First of all, I'm absolutely loving jQuery. Amazing work
to all those who have worked on it. Thanks.
So, I'm doing a pretty simple animation using the animate method.
jQuery 1.2.6. (Complete example source is included at the bottom of
this post.) I have an absolutely positioned DIV whose height can be
toggled between 50px and 300px by clicking a button. The DIV is the
full width of the document (right: 0px), and everything works
perfectly in Firefox 3.0.3. The animate calls looks like this:
$(div).animate({height: "50px"}, 300);
$(div).animate({height: "300px"}, 300);
Here's the thing: In IE7, when I animate/collapse from 300px back to
50px, the right side of the DIV "flickers"... i.e., the width of the
DIV momentarily shrinks by 20px, causing a 20px gap on the right side
of the screen. It only happens for a brief instant, and it only
happens about 50% of the time.
I found the line in animate() that's causing the odd behavior (line
3026 in jquery-1.2.6.js) :
if ( opt.overflow != null )
this.style.overflow = "hidden";
Admittedly, I don't really understand exactly what this line of code
is doing, but the value of opt.overflow on my page seems to be an
empty string "". If I change the code to:
if (( opt.overflow != null ) && ( opt.overflow != "" ))
this.style.overflow = "hidden";
...voila. Everything works perfectly. So, any jQuery experts out there
have any ideas? I'd rather not hack the jQuery source. Is there a way
for me to force this opt.overflow property to actually be NULL instead
of an empty string "" ?
*** Full example included below. ***
Thanks,
Michael
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"; >
<head>
<title>width flicker test</title>
<style type="text/css">
#divToggle { position: absolute; top: 50px; left: 0px; right: 0px;
height: 50px; background-color: Aqua; }
</style>
<script language="javascript" type="text/javascript"
src="jquery-1.2.6.js"></script>
<script language="javascript" type="text/javascript">
function Expand()
{
$(document.getElementById("divToggle")).animate({height: "300px"},
300);
}
function Collapse()
{
$(document.getElementById("divToggle")).animate({height: "50px"},
300);
}
</script>
</head>
<body>
<a href="javascript:Expand();">Expand</a> | <a
href="javascript:Collapse();">Collapse</a>
<div id="divToggle">Watch my right side flicker when you click
Collapse from an expanded state.<br />It doesn't happen every time, so
you may have to Expand/Collapse a few times to see it.</div>
</body>
</html>
