div flickers during jquery animation

Question

I wanted to do something like this: There are two divs side by side. when I hover over the 1st div, its width changes to 55% and the other div width changes to 45% and the same thing happens with the other div. here is the jsfiddle: https://jsfiddle.net/wjs5w11c/

My problem is that the divs flicker during animation.

I tried this on chrome and it worked fine when the window was fully maximised but when I resize the window, the flickering again starts.

please can someone help me out.

my code:

$(document).ready(function(){
    $("#left").hover(function(){
        $("#left").animate({width:"55%"},50);
        $("#right").animate({width:"45%"},50);
    },function(){
        $("#left").animate({width:"50%"},50);
        $("#right").animate({width:"50%"},50);
    })
})

$(document).ready(function(){
    $("#right").hover(function(){
        $("#right").animate({width:"55%"},50);
        $("#left").animate({width:"45%"},50);
    },function(){
        $("#right").animate({width:"50%"},50);
        $("#left").animate({width:"50%"},50);
    })
})

#wrapper {
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    height:683px;
}
#left, #right {
    display:block;
    width: 50%;
    float:left;
    height:100%;
}
#left {
    background:blue;
}
#right {
    background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<div id="wrapper">
    <div id="left" class="content_left">LEFT</div>
    <div id="right" class="content_right">RIGHT</div>
</div>

Answer 1

I would personally use CSS transitions and attribute classes for the different sizes. You would minimize the browser repaints, therefore better performance.

var leftDiv = document.getElementById('left'),
    rightDiv = document.getElementById('right');

$(document).ready(function(){
    $(leftDiv).on('mouseover', function(){
        $(rightDiv).addClass('expand-small');
        $(leftDiv).addClass('extract-small');
    });
    $(leftDiv).on('mouseout', function(){
        $(rightDiv).removeClass('expand-small');
        $(leftDiv).removeClass('extract-small');
    });
});

html,body {
    margin:0;
    padding:0;
}


#wrapper {
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    height:683px;
}
.content_left, .content_right {
    display:block;
    width: 50%;
    float:left;
    height:100%;
    -webkit-transition: width 50ms ease-in;
    -moz-transition: width 50ms ease-in;
    -o-transition: width 50ms ease-in;
    transition: width 50ms ease-in;
}

.expand-small{
    width: 55%;
}

.extract-small{
    width: 45%;
}

#left {
    background:blue;
}
#right {
    background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="left" class="content_left">LEFT</div>
<div id="right" class="content_right">RIGHT</div>
</div>

Some helpful links:

About CSS transitions

Why you should minimize browser repaints

Answer 2

How about using CSS3 Transition:

#left, #right {
    /* other styles */
    transition: width 0.5s ease-in-out;
}

I set it to 0.5s so it's more visible, you can change it to 0.05s of course.

And in jQuery:

$(document).ready(function(){
    $("#left").hover(function () {
        $("#left").css({width: "55%"});
        $("#right").css({width: "45%"});
    }, function () {
        $("#left").css({width: "50%"});
        $("#right").css({width: "50%"});
    });

    $("#right").hover(function () {
        $("#right").css({width: "55%"});
        $("#left").css({width: "45%"});
    }, function () {
        $("#right").css({width: "50%"});
        $("#left").css({width: "50%"});
    });
});

jsfiddle DEMO

Answer 3

UPDATE: https://jsfiddle.net/wjs5w11c/7/ Increased the animation time

So this is the issue with your JS, When the JS animation happens and when the cursor moves the animation starts to happen again

So what you have to do is to use jquery stop()

Here is the updated code

    $(document).ready(function(){
    $("#left").hover(function(){
            $("#left").stop().animate({width:"55%"},150);
            $("#right").stop().animate({width:"45%"},150);
        },function(){
            $("#left").stop().animate({width:"50%"},150);
            $("#right").stop().animate({width:"50%"},150);
    })
})

$(document).ready(function(){
    $("#right").hover(function(){
        $("#right").stop().animate({width:"55%"},150);
        $("#left").stop().animate({width:"45%"},150);
    },function(){
        $("#right").stop().animate({width:"50%"},150);
        $("#left").stop().animate({width:"50%"},150);
    })
})

Here is the updated code fiddle https://jsfiddle.net/wjs5w11c/1/

Answer 4

I think it is a concurrency issue here.. because the second div animation starts a little bit later then the first one.

I've changed the css and the animation like this: https://jsfiddle.net/wjs5w11c/6/

1. Animate only the left div
2. Set the background of the second div to the wrapper
3. Don't set a width to the second div because you don't need it

CSS:

html,body {
    margin:0;
    padding:0;
}


#wrapper {
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    height:683px;
    background: green;
}
#left, #right {
    display:block;
    float:left;
    height:100%;

}
#left {
    width: 50%;
    background:blue;
}

JS:

$(document).ready(function(){
    $("#left").mouseenter(function(){
        $("#left").animate({width:"55%"},50);
    }).mouseleave(function(){
        $("#left").animate({width:"50%"},50);
    });
});