从右侧滑动div到左侧<

我一直在寻找一个我认为已经存在的代码片段。我发现了很多不同的变体，但其中没有一个最适合我。我试图修改jsfiddles发现并修改其他示例，但无济于事。从右侧滑动div到左侧<

因为我几乎没有使用javascript和jquery语言的经验，所以我希望这里有人能帮上忙。

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

但是，扭曲，当一个新的链接被点击的前一个div的内容滑出屏幕允许新选择的div取代它。

希望我已经很好地解释了我自己。

内容的div我想滑动是=

ID = “内容的一个”

ID = “内容的两个”

等。

在正确的方向任何解决方案或指针将extreamly有用很多预先感谢。

这就是我最初试图修改，但我没有成功...

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

来源

2013-10-07 Beaniie

看看[动画]（http://api.jquery.com/animate/）财产jQuery的。您可以简单地为正确的属性设置动画。 *首先让我们看看你已经尝试了一些东西* – nkmol

这就是我曾试过的。当时看起来很简单，但我并不完全理解代码。 – Beaniie

我建议你遵循tuturiol而不是采取其他人的片段，goodluck :) – nkmol

尝试这样，

HTML

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

的

CSS

.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您滑动divclass

JS Fiddle

来源

2013-10-07 06:46:54

我会给它一个旋转谢谢。 – Beaniie

轻微的问题，它似乎是卡住我点击按钮一个div只是抖动右然后快速离开约2像素，然后停止..任何想法？ – Beaniie

已更新'jsfiddle' –

从右侧滑动div到左侧<

回答

相关问题