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 give multiple colors in the same cell in a full calendar?

    How to fix logo place in my website with css

    How to clone the inner html of a list in query and wrap it

    How do I make this background repeat horizontally the entire way across the screen?

    How to know from css if a select is opened

    Attempting to show logo using 'content' from CSS

    how to bring two blocks closer

    How to show a default SVG Fill Color on jQuery mouseout / mouseleave?

    How can I create a full height responsive horizontal scrolling list of images with CSS

    how to use css to display multiple posts in inline-block like google+

    How to apply css inside a text that is either any html control or without any html control

    How Do I Add CSS Class to body Element in Meteor?

    CSS HTML How to make a larger image than div display in full in div

    How to properly use css will-change property?

    how to target css for ie9 only?

    How to get the navigation element to have horizontal lines after each nav element in css

    CSS : How can I add shadow to a label or box

    How to make a CSS scroll follow div stop follow at a position

    Best practice: How to use (repeat) CSS style attributes correctly?

    With Wordpress, how do I link to an image to use as a background in my style.css file?

    How to make a multi-tiered dropdown menu with HTML and CSS only (maybe tiny JavaScript)

    How to use #resource in CSS?

    How to implement .SCSS on my own website? [closed]

    How to reveal a Text Field on a form when the Select shows 'Other' using just CSS

    how to center an item when it's the only one in a multi-column layout

    How (where) can i set fixed cell size in nested html tables, with css?

    How do you stretch header, content & footer color across a page with everything being centered in a fixed width?

    How does one make one table column header taller than the rest?

    CSS, knockout.js : how to dynamically assign id to checkbox with foreach data-bind

    How to fix responsive drop down menu using css?