How can I get these images to stop 'flickering' when they switch?


Tags: jquery,html,css

Problem :

I'm having some trouble with a jQuery image rotator. When the next/previous buttons are clicked twice quickly, the image flickers and you end up seeing both images. Any ideas on how to fix it?

Here's the HTML

<div id="prev">
<img id="prevListing" class="prevListing" src="..." onmouseover="this.src='...'" onmouseout="this.src='...'">
</div>

<div class="faded">
<div id="fader">
<img src="...">
<img src="...">
</div>
</div>

<div id="next">
<img id="nextListing" class="nextListing" src="..." onmouseover="this.src='...'" onmouseout="this.src='...'">
</div>

The CSS

.used {float:left; width:50%;}

.usedListingImage {width:65%;float:left; display:block; margin:-1% auto 0 auto; max-width:400px;}

#fader{display:block;  width:95%;}

.nextListing {width:5%;float:right; margin:6% 5% 5% 5%;padding-right:5%;}

.prevListing  {width:5%;float:left; margin:7% 5% 5% 5%; }

and the jQuery

<script type="text/javascript">
jQuery (function() {
    $('#fader img:not(:first)').hide();

    $('#fader img').each(function() {
        var img = $(this);
        $('<img>').attr('src', $(this).attr('src')).load(function() {
            img.css('margin-left', -'0');
        });
    });

    var pause = false;

    function fadeNext() {
        $('#fader img').first().fadeOut().appendTo($('#fader'));
        $('#fader img').first().fadeIn();
    }

    function fadePrev() {
        $('#fader img').first().fadeOut();
        $('#fader img').last().prependTo($('#fader')).fadeIn();
    }

    $('#fader, #next').click(function() {
        fadeNext();
    });

    $('#prev').click(function() {
        fadePrev();
    });

    $('#fader, .button').hover(function() {
        pause = true;
    },function() {
        pause = false;
    });

    function doRotate() {
        if(!pause) {
            fadeNext();
        }    
    }

    var rotate = setInterval(doRotate, 5000);

});

</script>

Any ideas how I can stop the flickering when images switch?



Solution :

You're currently initiating the fadeIn and fadeOut at the same time, causing a brief overlap. You may want to change fadeIn to a callback instead:

function fadeNext() {
    $('#fader img').first().fadeOut(400, function(){
            $('#fader img').first().fadeIn();
    }).appendTo($('#fader'));

}

function fadePrev() {
    $('#fader img').first().fadeOut(400, function(){
        $('#fader img').last().prependTo($('#fader')).fadeIn();
    });

}

    CSS Howto..

    How to calculate width of unused space for page with fixed width?

    How do I specify XPATH or CSS in Nokogiri to scrape a page's table data?

    How to add part of css property value through scope in ng-style in angular

    How do you make the colour of a h1 tag to change if the user hovers over the body in css and html?

    How to use CSS to modify an icon with the bootstrap collapse

    how to replace url in css using regexp (javascript)

    text-rendering in css, what is it? and how to use it?

    How to use a CSS sprite for a Repeating background image?

    how to show button and images in one line using css

    How to truly align center of two elemnts with css?

    How to overlap images in the header section?

    How to make a parent object in CSS menu stay in hover state when children are hovered over

    How to horizontally repeat two different bg gradients to the entire page width?

    When styling XML with CSS, how to refer to tag names that contain periods or colons?

    How do I get a CSS class to show up in my javascript with my previous method?

    How to check if an element has a hover property and do something to another element in css [closed]

    How can one select a parent element several levels above the child element utilizing the 'hover' selector and ':has()'?

    How to format XML file with CSS?

    How to CSS a two column list of items?

    How do I apply a style to all children of an elements

    How to set control properties in css?

    How to make a transparent border using CSS?

    How to change scrollbar css at runtime with javascript?

    How to fix the my Anchor link issue [duplicate]

    How can I remove a parent with a certain child inside of it (media queries)

    How to deselect with CSS?

    jQuery How do i apply CSS to selected text

    How to reset tag in CSS

    How to highlight an image after selection using css or jquery? [closed]

    How to target a specific element of a div in CSS?