Using toggle, ive observed all image types and of all sizes, including animated gif and png, will freeze and then disappear, sometimes with a frame or two of animation. If they were located near the left side, then they will toggle in squeezed against it and then pop out, as if its just animating the height, and then finally the width. If they are center, then they will just pop in or sometimes animate in fine. Im using FF4. FF3, chrome, and opera will toggle out fine, but they just pop in when toggling in, except for FF3 which will show me a vertical line (animating only the height i guess).
With flv's, if i wrap them in a div and toggle that it will pop out and in and then animate fine out. Then toggled back in it will animate in fine, and once its ended it will pop out and disappear until i scroll.
Heres my project, take a look. I get the impression that jquery is unsupported so ill just leave it at that.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="savedstuff/jquery/jquery-1.4.4.js" type="text/javascript"></script>
<script src="savedstuff/jquery/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script src="savedstuff/jquery/JqueryUIstuff/css/smoothness/jquery-ui-1.8.9.custom.css" type="text/css"></script>
<style>
#box {}
.item {
position:absolute;
top:300px;
left:800px;
-moz-transition: all 2s ease 0s;
}
.menu {
position:absolute;
top:0px;
left:0px;
-moz-transition: all 2s ease 0s;
}
</style>
</head>
<body>
<div id="box">
<img src="images/menu.jpg" class="menu" name="menu" />
<img src="images/item.jpg" class="item" name="item" />
</div>
<script type="text/javascript">
$(function() {
$('img[name="menu"]').click(function() {
$('img[name="item"]').toggle(2000);
});
});
</script>
<!--<div id="box" name="video1">
<embed play="true" loop="false" name="video1" src="videos/720.swf" type="application/x-shockwave-flash" width="1280" height="720" wmode="transparent" class="menu" ></embed>
</div>
<script type="text/javascript">
$(function() {
$('img[name="menu"]').click(function() {
$('div[name="video1"]').toggle(2000);
});
});
</script>-->
</body>
</html>