更改位置拉元素

Question

我有兩個內聯塊元素並排。如果我改變第二個位置（右-300像素），第一個位置停留並且不被第二個位置拉動。

如果你點擊<div class="navigation"></div>的<nav class="main-nav">了right: -300px;但與藍色背景的第一個元素不會移動到右側。

看一看：FIDDLE

<section class="sidebar"> 
      <div class="navigation"> 
      </div><nav class="main-nav"> 
       <ul> 
        <li><a href="#"><span>Lorem</span></a></li> 
        <li><a href="#"><span>Lorem</span></a></li> 
        <li><a href="#"><span>Lorem</span></a></li> 
        <li><a href="#"><span>Lorem</span></a></li> 
        <li><a href="#"><span>Lorem</span></a></li> 
       </ul> 
      </nav> 
     </section> 

這是我的jQuery的切換類：

$(".navigation").click(function() { 
    $(".main-nav").toggleClass("open"); 
}); 

.sidebar { 
    position: fixed; 
    top: 0; 
    right: 0; 
    z-index: 99; 
} 

.sidebar .navigation { 
    height: 130px; 
    width: 130px; 
    background: #0077b4; 
    position: relative; 
    display: inline-block; 
    cursor: pointer; 
    float: left; 
} 

.main-nav { 
    display: inline-block; 
    position: relative; 
    right: 0; 
    transition: right 0.3s linear; 
    -webkit-transition: right 0.3s ease; 
    -moz-transition: right 0.3s ease; 
    -o-transition: right 0.3s ease; 
} 

.main-nav.open { 
    right: -300px; 
} 

.main-nav ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

.main-nav ul li { 
    float: left; 
    height: 130px; 
    width: 130px; 
    background: #000; 
    position: relative; 
} 

.main-nav ul li a { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
} 

.main-nav ul li span { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    color: #fff; 
} 

我的問題：左邊的藍色元素應該移動到右側的右側「main-導航「被移動。

Answer 1

您還需要嚮導航div添加轉場和點擊效果。看看更新的fiddle

HTML

<section class="sidebar"> 
    <div class="navwrap"> 
      <div class="navigation"> 
      </div><nav class="main-nav"> 
       <ul> 
        <li><a href="#"><span>Lorem</span></a></li> 
        <li><a href="#"><span>Lorem</span></a></li> 
        <li><a href="#"><span>Lorem</span></a></li> 
        <li><a href="#"><span>Lorem</span></a></li> 
        <li><a href="#"><span>Lorem</span></a></li> 
       </ul> 
      </nav> 
    </div> 
     </section> 

CSS

.sidebar { 
    position: fixed; 
    top: 0; 
    right: 0; 
    z-index: 99; 
} 

.sidebar .navigation { 
    height: 130px; 
    width: 130px; 
    background: #0077b4; 
    position: relative; 
    display: inline-block; 
    cursor: pointer; 

} 

.navwrap { 
    display: inline-block; 
    position: relative; 
    right: 0; 
    transition: right 0.3s ease; 
    -webkit-transition: right 0.3s ease; 
    -moz-transition: right 0.3s ease; 
    -o-transition: right 0.3s ease; 
} 

.main-nav { 
    display: inline-block; 
    position: relative; 
    right: 0; 

} 

.open { 
    right: -300px; 
} 

.main-nav ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

.main-nav ul li { 
    float: left; 
    height: 130px; 
    width: 130px; 
    background: #000; 
    position: relative; 
} 

.main-nav ul li a { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
} 

.main-nav ul li span { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    color: #fff; 
} 

JQuery的

$(".navwrap").click(function() { 
    $(this).toggleClass("open"); 
});