SO - 17485709

HTML

<div id="one" class="try">one</div>
<div id="two" class="try">two</div>
<div id="three" class="try">three</div>
<div id="one-slide" class="content">one-slide</div>
<div id="two-slide" class="content">two-slide</div>
<div id="three-slide" class="content">three-slide</div>

CSS

.try {
    width: 50px;
    height: 50px;
    border: 1px black solid;
    margin-bottom: 5px;
 }

.content {
    width: 100px;
    height: 100%;
    background-color: grey;
    position: fixed;
    top: 0;
    right: -50px;
    transition: all 1s ease;
}

JavaScript

$(".try").hover(
  function () {
    $('#' + this.id + '-slide').css('right','0px');
  },
  function () {
    $('#' + this.id + '-slide').css('right','-50px');
  }
);