Question

Here’s my code: http://jsfiddle.net/ZspZT/

As you can see from the example, the fourth div block is flickering pretty badly, particularly on the hover-over effect, but also occasionally with the other divs as well.

Thanks in advance!

Answer 1

It appears that the easing function built into .animate is causing your percentage widths to add up to greater than 100%, causing the last sub-DIV to disappear. There are a few ways to solve this.

When I replace your percentage widths with fixed numerical widths, the problem vanishes. I used this in the code below (and your code had a LOT of redundancy to reduce):

$('document').ready(function() {
    var speed = 450;
    $('.four-ways-slide').hover(function() {
        $(this).stop().animate({
            width: 425
        }, speed).siblings().stop().animate({
            width: 25
        }, speed);
    }, function() {
        $(this).siblings().andSelf().stop().animate({
            width: 125
        }, speed);
    });
});

http://jsfiddle.net/mblase75/ZspZT/10/

Another possibility is to use percent widths that add up to 99% instead of 100%, and set a background color on the container DIV to hide the gap. Adding linear easing to the .animate method helps keep the total width from exceeding 100%:

$('document').ready(function() {
    var speed = 450;
    $('.four-ways-slide').hover(function() {
        $(this).stop().animate({
            width: '75%'
        }, speed, 'linear').siblings().stop().animate({
            width: '8%'
        }, speed, 'linear');
    }, function() {
        $(this).siblings().andSelf().stop().animate({
            width: '24.5%'
        }, speed, 'linear');
    });
});

#four-ways-slide-4,#four-ways-slider{background:#999999;}

http://jsfiddle.net/mblase75/ZspZT/9/