JQuery Cycle Plugin - FireFox - Transition bug
I'm using the Cycle plugin to implement a slideshow of divs on my page. Here's my html:
<div class="slideshow" id="slideshow">
<div id="nav"></div>
<div id="slide1" class="slide">
<div class="slideImage">
<img src="Images/ist2_4878226-graphs-and-charts.jpg" />
</div>
<div class="slideContent">
<h2>bla bla bal s</h2>
<ul>
<li>the dog ran over the hill</li>
<li>the dog ran over the hill</li>
<li>the dog ran over the hill</li>
<li>the dog ran over the hill</li>
<li>the dog ran over the hill</li>
</ul>
</div>
</div>
<div id="slide2" class="slide">
<div class="slideImage">
<img src="Images/ist2_6476620-business-meeting.jpg" />
</div>
<div class="slideContent">
<p class="testimonial">the dog ran over the hill</p>
<p class="testimonial">Mike Smith,<br />
Director, Financial Planning and Corporate Compliance,<br />
XYZ Facility
</p>
</div>
</div> ..... I have two more .slide divs
Here's my plugin call:
$(function() {
//set up slideshow
$('.slideshow').cycle({
fx: 'wipe',
timeout: 8000,
pager: '#nav',
slideExpr: '.slide'
});
In IE 8, this works fine. However, in Firefox 3.6, when the slides transition, the text of the previous div (whatever's in the div with class=slideContent) appears overwritten by the text of the next div. When the transition is over, all is fine. Has anyone experienced something like this? Please advise.
Thanks!