CODEWITHSUNDEEP
jquery
HerrimanCoder
HerrimanCoder

Reputation: 7226

jquery fadeOut()/fadeIn() hiccup

I have some jquery code I got from htmled that transitions photos from one to the next to the next. But the 2nd image that appears only appears for an instant and then goes to the next picture. After that the loop is smooth, no problems.

Here's the jquery:

$('.fadein img:gt(0)').hide();
setInterval(function () {
    $('.fadein :first-child').fadeOut(1500)
                             .next('img')
                             .fadeIn(1500)
                             .end()
                             .appendTo('.fadein');
}, 4000); // 4 seconds

You can see it in action here: http://www.zerogravpro.com/yurt/

Upvotes: 1

Views: 309

Answers (2)

Jeff Miller
Jeff Miller

Reputation: 2443

Try moving all of your JavaScripts right before the closing body tag.

Also, be sure to wrap the additional jQuery in $(function() {}); so the code doesn't fire until the DOM is ready. See below:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  $('.fadein img:gt(0)').hide();

  setInterval(function () {
    $('.fadein :first-child').fadeOut()
                             .next('img')
                             .fadeIn()
                             .end()
                             .appendTo('.fadein');
  }, 4000); // 4 seconds
});
</script>

Upvotes: 2

clime
clime

Reputation: 8885

$('.fadein img:gt(0)').hide();

This line does not work because it is called before dom is inited. Hence the second image is shown initially instead of the first, which causes the hiccup.

Upvotes: 1

Related Questions