[jQuery] Cycle's fade effect not working in IE 7 or 6
Greetings,
I'm having problems with transitions of a slideshow running with a
thumbnail pager. Although the fade effect works fine in Firefox and
Safari, in IE the content disappears completely before the next
content abruptly appears. Here's the test site (Cycle takes a few
seconds to start) http://www.creativeresearch.uga.edu/cra.php/site/
and following is the code. Any suggestions are much appreciated.
<head>
<script type="text/javascript" src="/assets/js/jquery-1.3.2.min.js"></
script>
<script type="text/javascript" src="/assets/js/jquery.cycle.min.js"></
script>
</head>
<div id="awardFeatures">
<div class="awardContent">
<div class="awardContent-CRA">
<div class="awardImage-CRA"> <img src="/images/feature/
image.jpg" width="300" height="200" /> </div>
<div class="awardInfo-CRA">
<h3>Heading 1</h3>
Content 1
</div>
</div>
<div class="awardContent-CRA">
<div class="awardImage-CRA"> <img src="/images/feature/
image.jpg" width="300" height="200" /> </div>
<div class="awardInfo-CRA">
<h3>Heading 2</h3>
Content 2
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#awardFeatures-CRA').before('<ul class="thumbnails-CRA">').cycle
({
fx: 'fade',
speed: 1000,
timeout: 7000,
cleartype: 1,
pager: '.thumbnails-CRA',
pauseOnPagerHover: true,
pagerEvent: 'mouseover',pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"><img src="' + $(slide).children
("div.awardImage-CRA:first").children("img:first").attr("src") + '"
width="72" height="47" /></a></li>';
}
});
});
</script>