Javascript 从右侧滑动div>；向左<；

我一直在搜索一个我认为已经存在的代码片段。我发现有许多不同的变体，但没有一个最适合我。我试图修改我找到的jsfiddles并调整其他示例，但没有效果

因为我以前很少甚至没有使用javascript和Jquery语言的经验，所以我希望这里的人能提供帮助

在我当前的项目中，我有一个页面，其中加载了所有内容。目前我有六个div都隐藏在屏幕右侧。左侧有一个垂直导航菜单。我想要的是，当单击带有指定div的链接时，目标div在屏幕上从右向左滑动，并在导航菜单旁边停止

然而，当点击一个新链接时，上一个div的内容就会滑出屏幕，允许新选择的div替换它

希望我已经解释清楚了

我想要滑动的内容div是=

id=“内容一”

id=“内容二”

等等

任何正确方向的解决方案或指针都将非常有用，请提前多谢

这是我最初试图修改的内容，但没有成功

$(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');  
  }
});

试着这样,

HTML

<div id="panel" class="panel">
         content
</div>
<!-- Trigger -->
<a id="trigger" class="trigger">click here </a>

CSS

$(document).ready(function () {

    var settings = {
        objSlideTrigger: '#triggerLink', // link button id
        objSlidePanel: 'your_slide_div' // slide div class or id
    }

    $(settings.objSlideTrigger).bind('click' , function() {
        //If the panel isn't out
        if(!$(settings.objSlidePanel).hasClass('out')) {
            slidePanelOut();
        } else if($(settings.objSlidePanel).hasClass('out')) {
            slidePanelIn();
        } 
    });

    function slidePanelOut() {
        //Animate it to left 
        $(settings.objSlidePanel).animate({
            'right' : '-67%'
        });
        //Add the out class
        $(settings.objSlidePanel).addClass('out');
    }
    function slidePanelIn() {
        //Otherwise, animate it back in
        $(settings.objSlidePanel).animate({
            'right' : '-89%'
        });
        //Remove the out class
        $(settings.objSlidePanel).removeClass('out');
    }

});

 .panel {
        width:85%;
        padding:2%;
        position:fixed;
        right:-89%;
        top:46px;
        z-index:2;
        background: #2F2F2F ;
        -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
        border-radius: 1% 1% 1% 1%;
        border-radius: 5px;
    }
    .trigger {
        width:8%;
        text-align:center;
        color:goldenrod;
        position:absolute;
        top:26px;
        padding:0.5% 0%;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        -moz-border-radius-bottomleft: 10px;
        -moz-border-top-left-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -webkit-border-top-left-radius: 10px;
        background:#2F2F2F ;
        right:30%;
    }

这里是

.panel

您的滑动

div

类

---

查看jquery的属性。您可以简单地设置正确属性的动画。首先让我们看看你试过什么，这就是我试过的。当时它看起来很简单，但是我不太理解代码。我建议你遵循一个教程，而不是别人的一个片段，goodluck:）checkout.slideToggle（），animate或使用css3进行转换，然后。toggleClass（）-但最后我必须同意@nkmol，如果你不理解它，就去学习一些简单的东西，比如变量是如何工作的，什么是方法，对象和数组之间的区别-如何使用if或switch语句ofc您必须了解布尔值-然后与douglas crockford一起观看一些视频，了解为什么所有这些都是必需的您可以尝试本教程以获得更好的结果轻微问题，它似乎被卡住了，我点击按钮，div只是左右快速摆动，大约2 px，然后停止。。有什么想法吗？谢谢！我认为它在一定程度上起作用了。它在滑动，什么都有。但出于某种原因，它不会一直开放。（也就是说，我点击按钮，它开始滑动，但很快关闭。）我认为这可能是因为与内容框链接的附加Css。我找个修理工看看我能不能解决它。谢谢大家的帮助。非常感谢！请注意，我最终确实修复了它，它实际上是一个额外的代理css元素。再次感谢！有没有办法创建多个内容框链接？我已经试了好几天了，似乎无法确定：？