通過jQuery或CSS3從右向左滑動div

我有以下jsfiddle。我試圖讓右側的div滑動到左側div的位置，當用戶點擊任何示例鏈接時，我無法弄清楚如何做到這一點，因爲我相當新的CSS3過渡和jQuery。有人能幫助我指引正確的方向嗎？我也看過jQuery的動畫，但覺得有點混亂。通過jQuery或CSS3從右向左滑動div

的過渡應在IE10 +工作，它下面的東西很好，如果它沒有一個過渡

http://jsfiddle.net/AV22p/

下面是我的HTML結構

<section id="modalwindow"> 
    <div id="foodlist"> 
     <div class="links"> 
      <h1>Div 1</h1> 
       <ul> 
        <a href="#"><li>Example1 </li></a> 
        <li><a href="#">Example2</a></li> 
        <li><a href="#">Example3</a></li> 
        <li><a href="#">Example4</a></li> 
        <li><a href="#">Example5</a></li> 
        <li><a href="#">Example6</a></li> 
        <li><a href="#">Example7</a></li> 
        <li><a href="#">Example8</a></li> 
       </ul> 

     </div> 
    </div> 
</section> 

<section id="modalwindow"> 
    <div id="food_details"> 
     <div class="details"> 
      <h1>Recipe</h1> 
      <ul> 
       <li>test </li> 
       <li>test</li> 
       <li>test</li> 
      </ul> 

     </div> 
    </div> 
</section>

來源

2014-05-19 Namenone

你有沒有試過http://stackoverflow.com/questions/2411314/jquery-slide-left-and-slide-right?rq=1？ – hitautodestruct

我的代碼中沒有看到任何CSS或JavaScript嘗試執行幻燈片。 – j08691

id在網頁中必須是唯一的，並且你使用了modalwindow兩次。您的標記中存在其他一些問題。除此之外，你有沒有嘗試過任何代碼？ –

不知道這是什麼你想要的，因爲描述很模糊。但是，您可能可以將其轉換爲您的需求。

divWidth檢查部分的與。點擊鏈接後，包含#food_details的部分將#modalwindow的（負）寬度移至左邊。

$('.links ul li a').click(function(){ 
    var divWidth = '-'+$('#modalwindow').width(); 
    $('#food_details').parent().animate({left: divWidth}); 
});

http://jsfiddle.net/AV22p/3/

另外請注意，您的第一個例子鏈接有不同的/無效的標記比其他人。

來源

2014-05-19 13:47:53 timo

通過jQuery或CSS3從右向左滑動div

回答

相關問題