Javascript issue with opera web browser

I have a hover effect on my website that I am creating that works fine on every browser with the exception of the Opera Web browser. Once you hover the image the div that has an css opacity should show and on roll off the div fades away but this does not happen in this browser.

Here is the javascript:

$(document).ready(function(){
$('.project').hover(function() {
$(this).fadeTo("slow",1,"linear",1);
},function() {
$(this).fadeTo("slow",0, "linear",1);
});
});

Here is the css for the section:

#portfolio-images ul#portfolio li div.project{
position:relative;
display:inline-block;
opacity:0;
*display: inline;
*vertical-align: auto;
}

Here is the html:

<div class="project">
		 <ul>
		 <li class="top"><a class="fancybox-effects-b" href="full_image/auquaic entertainment.jpg" title="Auqaic Entertainment">Auqaic Entertainment</a></li>
		 <li>Auqaic Entertainment Logo</li>
		 <li class="bottom"><a class="fancybox-effects-b" href="full_image/auquaic entertainment.jpg" title="Auqaic Entertainment">View Project</a></li>
		 </ul>
		 </div>

Any help would be greatly appreciated.