jQuery animate doesn't work in IE

[Sesquipedalian]

Hello all,

 

I wrote a jQuery / HTML code that seems to work great in Chrome and Firefox, but it doesn't do anything in IE. I use jQuery's animate function to move absolutely positioned ul's and il's. Any idea why it isn't working?

 

jQuery

$(document).ready(function() {
$("div.links").hover(function() {}, function() {
	$("li.mainLink").each(function() {
			$(this).stop().animate({
			opacity: 1,
			}, 100);

	});
});
$("li.mainLink").hover(function() {
	$(this).data("hover", "yes");
	$(this).css({opacity: 1,});
	$("li.mainLink").each(function() {
		if($(this).data("hover") != "yes") {
			$(this).animate({
			opacity: .4,
			}, 100);
		}
	});
}, function() {
	$(this).data("hover", "no");
	$(this).animate({
	opacity: .4,
	}, 50);
});
var leftNum;
leftNum = 0;
var num;
num = -1;
$("li.mainLink").each(function() {
	num++;
	leftNum = (126*num)+30;
	$(this).stop().animate({
		left: leftNum,
		},1000);

});
});

 

HTML

<div class="bodyWrapper">
<div class="banner"></div>
<div class="links">
<ul class="linkWrapper">
<li class="mainLink"><span>Main Link</span></li>
<li class="mainLink"><span>Main Link</span></li>
<li class="mainLink"><span>Main Link</span></li>
<li class="mainLink"><span>Main Link</span></li>
<li class="mainLink"><span>Main Link</span></li>
<li class="mainLink"><span>Main Link</span></li>
<li class="mainLink"><span>Main Link</span></li>
</ul>
</div>
<div class="mainWrapper">
</div>
<div class="bottomShadow"></div>
<div class="leftShadow"></div>
<div class="rightShadow"></div>
<div class="bottomLeft"></div>
<div class="bottomRight"></div>
</div>

 

CSS (if needed)

<style type="text/css" >
.bodyWrapper {
width:947px;
text-align:left;
margin:0 auto;
height:400px;
position:relative;
}
body {
text-align:center;
background:url("bg.jpg");
font-family:"Helvetica Neue";
}
.banner {
background:url("banner.jpg");
width:100%;
height:113px;
position:absolute;
top:0;

}
.leftShadow {
background:url("leftShadow.jpg");
height:100%;
width:29px;
position:absolute;
top:0;
left:0;
}
.rightShadow {
background:url("rightShadow.jpg");
height:100%;
width:29px;
position:absolute;
top:0;
right:0;
}
.bottomShadow {
background:url("bottomShadow.jpg");
height:20px;
width:100%;
position:absolute;
bottom:0;
}
.bottomLeft {
background:url("bottomLeft.jpg");
height:73px;
width:84px;
position:absolute;
bottom:-22;
left:-13;
}
.bottomRight {
background:url("bottomRight.jpg");
height:54px;
width:59px;
position:absolute;
bottom:-15;
right:-5;
}
.links {
background:url("linksBg.jpg");
height:34px;
width:100%;
position:absolute;
top:113px;
}
.mainWrapper {
height:100%;
width:100%;
background-color:white;
}
li.mainLink{
background:url("linkNormal.jpg");
height:30px;
width:131px;
text-align:center;
position:absolute;
top:2px;
cursor:pointer;
}
li.mainLink > span {
position:relative;
top:16%;
font-size:13px;
color:#76413d;
}
ul { list-style-type:none; }
</style>

 

Thanks for your help,

 

-

Sesq

[ngreenwood6]

If I am not mistaken this could be because IE does not use the opacity property. Instead you have to use the filter property. So in css this would be:

 

.opacity {
  opacity: 0.5;
  filter: alpha(opacity = 50);
}

 

Also make sure you dont have any javascript errors in IE. If you look in the lower left hand corner of IE you will see a little yellow triangle. I always make sure that there are no commas where it is not needed because I found issues in IE with them. For example your first animate looks like this:

 

$("li.mainLink").each(function() {
            $(this).stop().animate({
            opacity: 1,
            }, 100);

      });

 

It should look like this:

 

$("li.mainLink").each(function() {
            $(this).stop().animate({
            opacity: 1
            }, 100);

      });

 

If you notice after opacity:1 you had a comma. The comma is not needed unless there is another property that you are setting. Just a heads up.