javascript - div を右 > から左 < にスライド

Question

私は、すでにどこかに出回っていると思われるコード スニペットを探していました。私が見つけたさまざまなバリエーションがありますが、どれも私に最適ではありません. 私は見つかったjsfiddlesを変更し、他の例を微調整しようとしましたが、役に立ちませんでした。

私は JavaScript と Jquery 言語の経験がほとんどないため、ここにいる誰かが助けてくれることを願っています。

私の現在のプロジェクトでは、すべてのコンテンツが読み込まれる単一のページがあります。現在、画面の右側に 6 つの div がすべて隠されています。左側に縦型のナビゲーション メニューがあります。私が欲しいのは、割り当てられた div のリンクがクリックされたとき、その対象の div が画面上を右から左にスライドし、ナビゲーション メニューの横で停止することです。

ただし、ねじれは、新しいリンクをクリックすると、前の div のコンテンツが画面から滑り落ち、新しく選択された div がそれを置き換えることができるようになることです。

うまくいけば、私は自分自身を十分に説明しました。

スライドさせたいコンテンツ div は =

id="コンテンツ 1"

id="コンテンツ 2"

等々。

正しい方向への解決策や指針は、非常に役立つでしょう。

これは私が最初に変更しようとしたものですが、失敗しました...

$(document).ready(function(){
  $("#navigation li a").on("click", function(e){
    e.preventDefault();`enter code here`
    var hrefval = $(this).attr("href");

    if(hrefval == "#content-one") {
      var distance = $('#container').css('right');

      if(distance == "auto" || distance == "0px") {
        $(this).addClass("open");
        activateSlider();
      } else {
        deactivateSlider();
      }
    }
  }); // end click event handler

 // $("#closebtn").on("click", function(e){
//    e.preventDefault();
//    closeSidepage();
//  }); // end close button event handler

  function activateSlider() {
    $('#container').animate({
      right: '350px'
    }, 400, 'easeOutBack'); 
  }

  function deactivateSlider(){
    $("#navigation li a").removeClass("open");
    $('#container').animate({
      right: '0px'
    }, 400, 'easeOutQuint');  
  }
});