JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu-wrapper bad">
    <ul class="menu-1">
        <li>menu 1 item 1</li>
        <li>menu 1 item 2</li>
        <li class="open">open &raquo;</li>
    </ul>
    <ul class="menu-2">
        <li>menu 2 item 1</li>
        <li>menu 2 item 2</li>
        <li class="close">&laquo; close</li>
    </ul>
</div>

<div class="menu-wrapper good">
    <ul class="menu-1">
        <li>menu 1 item 1</li>
        <li>menu 1 item 2</li>
        <li class="open">open &raquo;</li>
    </ul>
    <ul class="menu-2">
        <li>menu 2 item 1</li>
        <li>menu 2 item 2</li>
        <li class="close">&laquo; close</li>
    </ul>
</div>

CSS

* {
    color: white;
}

.menu-wrapper {
    width: 300px;
    height: 100px;
    position: relative;
    overflow-x: hidden;
}

.menu-1, .menu-2 {
    position: absolute;
    width: 100%;
    opacity: 0.75;
}

.menu-1 {
    background-color: red;
}

.menu-2 {
    background-color: blue;
}


.menu-2 {
    left: 100%;
}

JavaScript

// This works fine in FF but incorrectly in Chrome
$('.bad .open').click(function() {
    $(".bad .menu-1").animate({left: "-100%"}, 2000);
    $(".bad .menu-2").animate({left: "0"}, 2000);
});
$('.bad .close').click(function() {
    $(".bad .menu-1").animate({left: "0"}, 2000);
    $(".bad .menu-2").animate({left: "100%"}, 2000);
});

// This works in FF and Chrome
$('.good .open').click(function() {
    $(".good .menu-1").animate({left: "-100%"}, 2000);
    $(".good .menu-2").animate({left: "0%"}, 2000);
});
$('.good .close').click(function() {
    $(".good .menu-1").animate({left: "0%"}, 2000);
    $(".good .menu-2").animate({left: "100%"}, 2000);
});