A simple jQuery script not working in IE - thought jQuery was cross platform !
Could anyone explain why the following script does not work in IE. It is a very simple animation and works very nicely in FF.
I include CSS js and HTML as it appears on the test file.
	<style>
		.linkholder{
			display:block;
			float:left;
			position:relative;
			margin:15px;
			overflow:hidden; 
		}
		
		.linkholder img{
			border:none;
			max-height:200px;
			max-width:150px;
		}
					
		}
		.bwcover{
			position:absolute;
			left:0;
			top:0;
			display:none;
			}
			
		.colorlink{
			position:absolute;
			left:0;
			top:0;
		}
		
	</style>
	<script type="text/javascript" src="jquery.js"></script>
	
	<script type="text/javascript">
		jQuery(document).ready(function(){
			jQuery(".linkholder").each(function(i){
				var wid = jQuery(this).find(".colorlink").outerWidth();
				jQuery(this).width(wid);
				var hei=jQuery(this).find(".colorlink").outerHeight();
				jQuery(this).height(hei);
			});
			jQuery(".colorlink").fadeTo("fast",0.05);
			jQuery(".bwcover").fadeTo("fast",.25);
			anibase = jQuery(".linkholder").length;					
			function heartbeat(){
				newanigo();		
				jQuery(".bwcover").eq(anigo)
					.animate({opacity:.45,},1200,"linear")
					.delay(300)
					.animate({opacity:.15},500,"linear")					
					.animate({opacity:.25},350);
				jQuery(".colorlink").eq(anigo)
					.animate({opacity:.9,},1200,"linear")
					.animate({opacity:.05,},750,"linear");
				function newanigo() {anigo = Math.floor(Math.random()*(anibase))};
				var t=setTimeout(heartbeat,4000);
			};
			heartbeat();
			jQuery(".linkholder").hover(
  				function () {
					if(jQuery(this).find(".bwcover").is(":animated")){
						jQuery(this).find(".bwcover").stop(true,true);
					};
					jQuery(this).find(".colorlink").fadeTo("slow",1);
					jQuery(this).find(".bwcover" ).fadeOut("slow");
  					}, 
  				function () {
					if(jQuery(this).find(".bwcover").is(":animated")){
						jQuery(this).find(".bwcover").stop(true,true);
					};
    				jQuery(this).find(".bwcover").fadeTo("fast",.25);
					jQuery(this).find(".colorlink").fadeTo("slow",.05);					
  					}
				);
		});
	</script>
	
	<body>
		<div class="linkholder">			
			<div class="colorlink"><a href="#"><img src="DSCN3080.JPG" alt="" /></a></div>
			<div class="bwcover"><img  src="DSCN3080bw.jpg" alt="" /></div>			
		</div>
		<div class="linkholder">
			<div class="colorlink"><a href="#"><img src="relief2.jpg" alt="" /></a></div>
			<div class="bwcover"><img  src="relief2bw.jpg" alt="" /></div>
		</div>
		<div class="linkholder">
			<div class="colorlink"><a href="#"><img src="elegantbook.jpg" alt="" /></a></div>
			<div class="bwcover"><img  src="elegantbookbw.jpg" alt="" /></div>
		</div>
		<div class="linkholder">
			<div class="colorlink"><a href="#"><img src="DSCN3080.JPG" alt="" /></a></div>
			<div class="bwcover"><img  src="DSCN3080bw.jpg" alt="" /></div>
		</div>
		<div class="linkholder">
			<div class="colorlink"><a href="#"><img src="DSCN3080.JPG" alt="" /></a></div>
			<div class="bwcover"><img  src="DSCN3080bw.jpg" alt="" /></div>
		</div>
	</body>
</html>

I am surprised as I thought the whole point of jQuery is that it is cross platform and we shouldn't have to worry our sweet little heads about the "eccentricities" of IE.
A simple jQuery script not working in IE - thought jQuery was cross platform !
===

Could anyone explain why the following script does not work in IE. It is a very simple animation and works very nicely in FF.
I include CSS js and HTML as it appears on the test file.
	<style>
		.linkholder{
			display:block;
			float:left;
			position:relative;
			margin:15px;
			overflow:hidden; 
		}
		
		.linkholder img{
			border:none;
			max-height:200px;
			max-width:150px;
		}
					
		}
		.bwcover{
			position:absolute;
			left:0;
			top:0;
			display:none;
			}
			
		.colorlink{
			position:absolute;
			left:0;
			top:0;
		}
		
	</style>
	<script type="text/javascript" src="jquery.js"></script>
	
	<script type="text/javascript">
		jQuery(document).ready(function(){
			jQuery(".linkholder").each(function(i){
				var wid = jQuery(this).find(".colorlink").outerWidth();
				jQuery(this).width(wid);
				var hei=jQuery(this).find(".colorlink").outerHeight();
				jQuery(this).height(hei);
			});
			jQuery(".colorlink").fadeTo("fast",0.05);
			jQuery(".bwcover").fadeTo("fast",.25);
			anibase = jQuery(".linkholder").length;					
			function heartbeat(){
				newanigo();		
				jQuery(".bwcover").eq(anigo)
					.animate({opacity:.45,},1200,"linear")
					.delay(300)
					.animate({opacity:.15},500,"linear")					
					.animate({opacity:.25},350);
				jQuery(".colorlink").eq(anigo)
					.animate({opacity:.9,},1200,"linear")
					.animate({opacity:.05,},750,"linear");
				function newanigo() {anigo = Math.floor(Math.random()*(anibase))};
				var t=setTimeout(heartbeat,4000);
			};
			heartbeat();
			jQuery(".linkholder").hover(
  				function () {
					if(jQuery(this).find(".bwcover").is(":animated")){
						jQuery(this).find(".bwcover").stop(true,true);
					};
					jQuery(this).find(".colorlink").fadeTo("slow",1);
					jQuery(this).find(".bwcover" ).fadeOut("slow");
  					}, 
  				function () {
					if(jQuery(this).find(".bwcover").is(":animated")){
						jQuery(this).find(".bwcover").stop(true,true);
					};
    				jQuery(this).find(".bwcover").fadeTo("fast",.25);
					jQuery(this).find(".colorlink").fadeTo("slow",.05);					
  					}
				);
		});
	</script>
	
	<body>
		<div class="linkholder">			
			<div class="colorlink"><a href="#"><img src="DSCN3080.JPG" alt="" /></a></div>
			<div class="bwcover"><img  src="DSCN3080bw.jpg" alt="" /></div>			
		</div>
		<div class="linkholder">
			<div class="colorlink"><a href="#"><img src="relief2.jpg" alt="" /></a></div>
			<div class="bwcover"><img  src="relief2bw.jpg" alt="" /></div>
		</div>
		<div class="linkholder">
			<div class="colorlink"><a href="#"><img src="elegantbook.jpg" alt="" /></a></div>
			<div class="bwcover"><img  src="elegantbookbw.jpg" alt="" /></div>
		</div>
		<div class="linkholder">
			<div class="colorlink"><a href="#"><img src="DSCN3080.JPG" alt="" /></a></div>
			<div class="bwcover"><img  src="DSCN3080bw.jpg" alt="" /></div>
		</div>
		<div class="linkholder">
			<div class="colorlink"><a href="#"><img src="DSCN3080.JPG" alt="" /></a></div>
			<div class="bwcover"><img  src="DSCN3080bw.jpg" alt="" /></div>
		</div>
	</body>
</html>

I am surprised as I thought the whole point of jQuery is that it is cross platform and we shouldn't have to worry our sweet little heads about the "eccentricities" of IE.