Anonymous 0

I've used this exact method before with no problem. This time, though, instead of a consistent fade it will get jerky and flicker. The behavior is so sporadic I haven't been able to pinpoint anything. Here is the code:

IN HTML HEADER:

       function slideSwitch() {
    var $active = $('#featured-slideshow DIV.active');
    if ( $active.length == 0 ) $active = $('#featured-slideshow DIV:last');
    var $next =  $active.next().length ? $active.next()
        : $('#featured-slideshow DIV:first');
    $active.addClass('last-active');
    $next.css({opacity: 0.0})

        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 1000 );
});

IN HTML:

 <div id="featured-area">
    <div class="container clearfix">    
            <div id="featured-slideshow">
                    <div class="active simage slide1"></div>
                    <div class="simage slide2"></div>
                    <div class="simage slide3"></div>
                <div class="simage slide1"></div>
                    <div class="simage slide2"></div>
                <div class="simage slide3"></div>
            </div>
    </div>
</div>

IN CSS STYLE SHEET:

#featured-slideshow { position: relative; margin:0; padding:0; width:961px; height:431px; }
.mainimage { margin:0; padding:0; width:961px; height:431px; background:#5d2445; }
#featured-slideshow img, #featured-slideshow div.simage { position:absolute; top:0; left:0px; z-index:8; width:961px; height:410px; }
#featured-slideshow img.active, #featured-slideshow div.simage.active { z-index:10; }
#featured-slideshow img.last-active, #featured-slideshow div.simage.last-active { z-index:9; }

.slide1 { background:url(images/featured-bg-sprite.jpg) no-repeat left -20px; width:961px; height:411px; }
.slide2 { background:url(images/featured-bg-sprite.jpg) no-repeat left -451px; width:961px; height:411px; }
.slide3 { background:url(images/featured-bg-sprite.jpg) no-repeat left -882px; width:961px; height:411px; }

I'm using jquery 1.3.2....

2 answers

Ktash 1851
0
points
This was chosen as the best answer

Well, I had a little trouble getting it up and running at first, but once I did, I found the issues stemmed from:

.animate({opacity:1.0},1000,function () {
    $active.removeClass('active last-active');
});

Basically, since the complete function is getting called after the animation completes, it means that occasionally the order gets a little funky and active is removed second, causing a flicker. I solved it by simply doing:

.animate(
    {opacity: 1.0},
    {
        duration: 1000,
        step:     function() {
                      if($(this).css('opacity') > 0.95)
                          $active.removeClass('active last-active');
                  }
    });

So, basically, if we're 95% through the animation, we'll start the process of removing classes. The flicker went away after this.

Answered over 5 years ago by Ktash
0
points

Worked for me! Thanks so much!

Answered over 5 years ago by Freelancer