从左向右滑动

Question

我一直在寻找并尝试了很多东西，但我无法得到解决方案;

#bar {
    width: 2em;
    height: 15em;
    display: none;
    position: relative;
    float: left;
    margin-left: -1.7em;
    background: rgba(22, 43, 58, 0.4);
}
#button {
    width: 2em;
    height: 1.3em;
    float:left;
    position: relative;
    margin-top: 0.7em;
    margin-left: 0.em;
    background: rgba(22, 43, 58, 0.4);
    color: rgba(250, 250, 250, 0.7);
    font-size: 1em;
    border-radius:0px 5px 5px 0px;
    text-shadow: 1px 1px 2px;
    cursor: pointer;
    border: none;
    opacity: 0.8;
}

我想按下按钮时，栏会向右滑动。

$(document).ready(function () {
    $('#button').click(function () {
        $("#bar").show('slide', {
            direction: 'right'
        }, 1500);
    });
});

这是部分的HTML

<div class="apps border">
    <div id="bar"></div>
    <div id="button">>></div>
    <div class="field"></div>
</div>

Demo

Answer 1

请查看更新版本：https://jsfiddle.net/isherwood/gc3b8n9q/

在JS中，方向应该是＆＃39; left＆＃39;

$("#bar").show('slide', {
  direction: 'left'
}, 1500);

也在CSS（不是直接需要）

#bar {
    width: 20em; //can try make bigger
}