How can I get this slider to work?

How can I make this code slide out? When I click the button the div slides out, however the button itself will not move. Also how can I get the image and text to form two columns? When using my IDE it shows as two columns, but on my website it does not.

Thank you!

$(document).ready(function() {
  $('.rec-anime-button').click(function() {
    if (parseInt($('.rec-anime-list-container').css('right')) < 0) {
      $('.rec-anime-list-container').css('right', '5px');
      $('.rec-anime-button').css('right', '500');
    } else {
      $('.rec-anime-list-container').css('right', '-490px');
      $('.rec-anime-button').css('right', '0');
    }
  });
});

.rec-anime-button {
  position: fixed;
  margin-top: 100px;
  right: 0;
  z-index: 1000000;
}
.rec-anime-list-container {
  position: fixed;
  margin-top: 100px;
  right: -490px;
  text-decoration: none;
  transition: right 300ms ease-in-out;
  z-index: 1000000;
}
.rec-anime-list {
  max-width: 480px;
  text-decoration: none;
}
.container li {
  float: left;
  width: 230px;
  margin-right: 10px;
  margin-bottom: 10px;
  text-decoration: none;
}
.column {
  display: inline-block;
  vertical-align: middle
}
.rec-anime-title {
  margin-top: 0;
  color: gray;
  width: 100px;
}
.sub {
  color: blue;
  font-size: 16px;
}
.dub {
  color: red;
  font-size: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Recommended Anime Slider -->
<div class="rec-anime-button">
  <img src="/Rec-Anime-button.png">
</div>
<div class="rec-anime-list-container">
  <ul class="rec-anime-list container">
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120xTITLE80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div>
    </li>
    <li>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div>
    </li>
  </ul>
</div>

Solution

try the below:I have added table for each li and a small modification pf specifying px while setting the style of button in js.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="rec-anime-button">
  <img src="http://static1.squarespace.com/static/51c4ae45e4b0e3594ecb840f/t/522e3eb4e4b0c5d6fd5ef60a/1378762451958/ARKHAM_Animation+Curve+Icon.png" style="width:80px;height:80px;">
</div>
<div class="rec-anime-list-container">
  <ul class="rec-anime-list container">
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div>
      </td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120xTITLE80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="sub">[Sub]</strong>
      </div></td></tr></table>
    </li>
    <li><table><tr><td>
      <a href="#">
        <div class="column">
          <img src="http://dummyimage.com/120x80/000/fff" />
        </div>
      </a></td><td>
      <div class="column rightcol">
        <p class="rec-anime-title">TITLE</p><strong class="dub">[Dub]</strong>
      </div>
    </li></td></tr></table>
  </ul>
</div>

<script>

$(document).ready(function() {
	  $('.rec-anime-button').click(function() {
	    if (parseInt($('.rec-anime-list-container').css('right')) < 0) {
	      $('.rec-anime-list-container').css('right', '5px');
	      $('.rec-anime-button').css('right', '500px');//use px
	    } else {
	      $('.rec-anime-list-container').css('right', '-490px');
	      $('.rec-anime-button').css('right', '0px');//use px
	    }
	  });
	});
</script>
<style>
.rec-anime-button {
  position: fixed;
  margin-top: 100px;
  right: 0;
  z-index: 1000000;
}
.rec-anime-list-container {
  position: fixed;
  margin-top: 100px;
  right: -490px;
  text-decoration: none;
  transition: right 300ms ease-in-out;
  z-index: 1000000;
}
.rec-anime-list {
  max-width: 480px;
  text-decoration: none;
}
.container li {
  float: left;
  width: 230px;
  margin-right: 10px;
  margin-bottom: 10px;
  text-decoration: none;
}
.column {
  display: inline-block;
  vertical-align: middle
}
.rec-anime-title {
  margin-top: 0;
  color: gray;
  width: 100px;
}
.sub {
  color: blue;
  font-size: 16px;
}
.dub {
  color: red;
  font-size: 16px;
}
ul{ 
  list-style-type: none;
}
</style>