jQuery Cycle Slides overlap on page load

问题

I have used jQuery Cycle in numerous projects. This time round I am getting a really bizarre visual glitch. On page load, all the slides are shown on top of each other, then as the script cycles through each slide, it eventually fixes itself (until the page is reloaded). For the example and code click here. The image below shows the glitch which seems to be happening in all browsers (tested in Firefox 4, Safari 5, Chrome 10, IE8)

Adding a background colour to each slide div does "fix" the problem in that it hides the other slides, but it isn't really a proper solution in my opinion.

Been battling with this all afternoon and I'm at a bit of a loss. Any help would be greatly appreciated.

Thanks

回答1:

I did it using a custom transition, set the display to none on all except maybe the first then add something like .....

jQuery(document).ready(function($) { 

$('.fade').cycle({ 
fx: 'custom', 
cssBefore: { top: 420, display: 'inline' }, 
animIn:  { top: 0 }, 
animOut: { top: -420 } 
}); });

This will show the item just before it's used!

回答2:

I had the same problem, but fixed it by following Truk's answer in setting each slide to display: none (except the first one), but instead of changing it to display inline on page load, you do it in the cycle call as follows:

 $(document).ready(function(){
    $('#header-content').cycle({
        fx: 'custom', 
          cssBefore: { left: 384, display: 'block' }, 
          animIn:  { left: 0}, 
          animOut: { left: -384 }
    });
})

Hope this helps someone else out!

回答3:

Add a display:none; to the slides so that they don't display on page load.

回答4:

in the div tag use style="display:none;" on all but one, and I gave them all a common class name. You could just get the children of the calling div too. On load change it to "display:inline". The only one to show is the one with no display:none.

Example using img tags, same principle:

<div class="fadeit" id="thisisit" style="float: left; padding: 5px; height: 320px; width: 240px;">
<img height="320" width="240" class="andy" style="display: none;" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-1.jpg" alt="" />
<img height="320" width="240" class="andy" style="display: none;" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-2.jpg" alt="" />
<img class="andy" src="http://news.phdcon.com/UserFiles/217/image/2750/2750-3.jpg" alt="" />  

<script language="javascript" type="text/javascript"> 

 window.onload=function() { 
  $('.andy').css('display','inline');

  $('.fadeit').cycle({ 
   fx:     'fade', 
   speed:   300, 
   timeout: 3000, 
   next:   '.fadeit', 
   pause:   1 ,
  slideExpr: 'img.andy'
}); };

</script></div>

回答5:

Should you not put your call to jQuery Cycle in the callback of head.js

head.js("http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js", "js/jquery.cycle.lite.min.js", function() {
      $('#featured').cycle();
});

Or just do away with head.js seeing as your not using any html5 /css3?

来源：https://stackoverflow.com/questions/5760157/jquery-cycle-slides-overlap-on-page-load

标签

jquery

html

css

cycle