Sliding a div left to right only partially working with jquery

Question

here I am trying to move a div left to right with jquery. The js I have written is partially working. I can move the div as intended (left to right) in some pages in Chrome, Opera and Yandex browser, but it does not work at all in firefox, so I believe the implementation is not up to the par and there must be some more concrete and efficient ways of doing it. With the following code snippet, a div (a fb like pop-up) shows up followed by page load a few seconds later and the effect is sliding the div from left to right. There is a close button. Upon clicking the close button, the div shrinks back (now right to left effect). I have given full code with style for the ease of full understanding. Any insights you offer to me will be of great help. Thank you. (the js code is given at the end)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class = "modal-prompt modal-prompt-shown" id = "fb_like" style = "display: none; z-index: 10000; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;">
  <style>
    .modal-overlay {
      /* overflow-y: scroll; */
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10000;
      background-color: rgba(0, 0, 0, 0.5);
      /* dim the background */
      cursor: pointer;
    }

    .modal-close-half-page {
      background: none;
      color: white;
      font-weight: bold;
      position: fixed;
      right: 50px;
      font-size: 14px;
    }

    .modal-prompt-half-page {
      display: block;
      height: 100%;
      position: fixed;
      width: 50%;
      background-color: #1fc2ff;
      top: 0;
      left: 0;
      z-index: 1000000;
    }

    .modal-prompt-half-page-arrow {
      width: 0;
      height: 0;
      border-top: 30px solid transparent;
      border-bottom: 30px solid transparent;
      border-left: 30px solid #1fc2ff;
      position: absolute;
      top: 50%;
      right: -30px;
      margin-top: -30px;
    }

    .modal-prompt-half-page-header {
      font-weight: bold;
      font-size: 57px;
      padding: 0 40px;
      text-align: right;
      line-height: 58px;
      color: white;
      text-transform: inherit;
      top: 50%;
      position: absolute;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      margin-bottom: 0;
    }

    .social-prompt-button-facebook {
      width: 101px;
      height: 101px;
      -moz-border-radius: 101px;
      -webkit-border-radius: 101px;
      border-radius: 101px;
      background-color: white;
      position: absolute;
      left: 110%;
      top: 50%;
      margin-top: -51px;
    }

    .social-prompt-button-facebook .fb-like {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -10px;
      margin-left: -24px;
    }

    .modal-prompt-half-page {
      left: calc(-40% - 30px);
      transition: left 0.4s ease;
      width: 40%;
      min-width: 450px;
    }

    .modal-overlay {
      opacity: 0;
      transition: opacity 0.4s ease;
      top: 0;
    }

    .social-prompt-button-facebook {
      overflow: hidden;
      position: fixed;
      top: 0;
      bottom: 0;
      left: calc(40% + 60px);
      margin: auto 0;
      width: 101px;
      height: 101px;
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -ms-transform: scale(0);
      -o-transform: scale(0);
      transform: scale(0);
      transition: height 0.4s ease, width 0.4s ease, transform 0.4s ease;
    }

    .modal-copy-container{
      font-size: 5vw;
      line-height: 5vw;
      margin-top: 0;
    }

    .modal-prompt-shown .modal-prompt-half-page {
      left: 0;
    }

    .modal-prompt-shown .modal-overlay {
      opacity: 1;
    }

    .modal-prompt-shown .social-prompt-button-facebook {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
    }

    @media (max-width: 1125px) {
      .modal-prompt-half-page {
        width: 450px;
        left: -480px;
      }

      .modal-prompt-shown .modal-prompt-half-page {
        left: 0;
      }

      .social-prompt-button-facebook {
        left: 510px;
      }

      .modal-copy-container {
        font-size: 800 normal 3.125rem / 3.125rem WorkSans, sans-serif;
        /* line-height: 56px; */
      }
    }

  </style>
  <div class = "modal-overlay"></div>
  <div class = "modal-prompt-half-page">
    <div class = "modal-close modal-close-half-page" onclick = "closeFB();">Close</div>
    <h6 class = "modal-prompt-half-page-header modal-copy-container">If you liked reading this story, then Like our page!</h6>
    <div class = "modal-prompt-half-page-arrow"></div>
    <div class = "modal-prompt-half-page-cont clearfix">
      <div class = "social-prompt-button-facebook">
        <div class = "fb-like fb_iframe_widget" data-href = "#" data-layout = "button" data-action = "like" data-show-faces = "false" data-callback-id = "genmodalfb" data-keen-tracking-name = "newUserModalV1" data-keen-social-channel = "facebook" data-keen-custom = "Halfpage 1.32" fb-xfbml-state = "rendered" fb-iframe-plugin-query = "action=like&amp;app_id=141861192518680&amp;container_width=0&amp;href=https%3A%2F%2Fwww.facebook.com%2FMicMedia&amp;layout=button&amp;locale=en_US&amp;sdk=joey&amp;show_faces=false">
          <span style = "vertical-align: bottom; width: 49px; height: 20px;">
            <iframe name = "f1be53ad29d6424" width = "1000px" height = "1000px" frameborder = "0" allowtransparency = "true" allowfullscreen = "true" scrolling = "no" title = "fb:like Facebook Social Plugin" src = "#" class = "" style = "border: none; visibility: visible; width: 49px; height: 20px;"></iframe>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function () {
    setTimeout(function () {
      // $('.modal-prompt').css('display', 'block').fadeIn("slow", function () {});
      $('.modal-prompt').animate({width: 'show'});
    }, 5000);
  });
</script>

<script type="text/javascript">
  $(document).ready(function () {
    $(".modal-close").click(function () {
      $(".modal-prompt").animate({
        width: "hide"
      });
    });
  });
</script>

Answer 1

Toggling 'hide' defaults to right-to-left

Answer 2

It doesn't work at all. I'm not sure why you're using so much code, but all you have to do for sliding to the left is use the JQuery animate function, like so:

$('#elementId').animate({
                left: '50%',
            }, 500 );

You can do this in sequence as to make it left to right and vice versa. No CSS is needed for animations or anything, just the basic stylings.