Divs switcher

by Daniel Mejia

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="wrapper">
    <div id="left" class="content_left"></div>
    <div id="right" class="content_right"></div>
</div>

CSS

#wrapper {
    width:100%;
    overflow:hidden;
    white-space:nowrap;
}
#left, #right {
    display:inline-block;
    width: 50%;
}
#left {
    background: url("http://upload.wikimedia.org/wikipedia/commons/a/af/Big_single-family_home_2.jpg") no-repeat;
    width:50%;
    height:20vh;
    background-size: cover;
    opacity: 0.35;
    background-color:#333;
}
#right {
    background: url("http://upload.wikimedia.org/wikipedia/commons/7/7e/Ladder_fall_prevention_%289253630705%29.jpg") no-repeat;
    width:50%;
    height:20vh;
    background-size: cover;
    opacity: 0.35;
    background-color:#333;
}

JavaScript

$("#left, #right").each(function() {
    $(this).data("standardWidth", $(this).width());
});

$("#left, #right").hover(function() {
    $(this).animate({
        width: "70%",
        opacity: 0.85
    }, 500 );
    $(this).parent().children().not(this).animate({
        width: "30%",
        opacity: 0.1
    }, 500 );
}, function() {
    $(this).parent().children().each(function() {
        $(this).animate({
            width: $(this).data("standardWidth"),
            opacity: 0.35
        }, 500 );
    });
});