JQuery silde divs back and fort horizontal水平

我想用左右箭頭滑動w-1，w-2，w-3 div和堡壘。我知道也許我可以在這裏使用負邊距，但我不熟悉JQ。我不確定我應該以這種方式設置的div開始（向左移動）。JQuery silde divs back and fort horizontal水平

HTML：

<html> 

    <head> 

    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"> 
     <meta charset="utf-8" /> 
     <title>Demo</title> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="arrows"> 
       <ul class="button-group"> 
        <li><a href="#" class="button">Left</a></li> 
        <li><a href="#" class="button">Right</a></li> 
       </ul>  
      </div> 
      <div id="windows"> 
       <div id="w-1" class="w"> 

       </div> 
       <div id="w-2" class="w"> 

       </div> 
       <div id="w-3" class="w"> 

       </div> 
      </div>  
     </div> 
    </body> 
    </html>

CSS：

body { 
      padding: 20px; 
    } 
    #container { 
      width: 800px; 
      height: 500px; 
      margin-left: auto; 
      margin-right: auto; 
      background-color: #EAEAEA; 
    } 
    #arrows { 
      width: 100%; 
      height: 100px; 
      background-color: #888888; 
    } 
    #arrows a { 
      color: white; 
      text-decoration: none; 
      font-size: 20px; 
      font-weight: bold; 
    } 
    #windows { 
      width: 100%; 
      height: 80%; 
      background-color: #EAEAEA; 
      padding: 50px 0; 
      overflow: hidden; 
      position: relative; 
    } 
    .w { 
      width: 100%; 
      height: 400px; 
      margin-bottom: 50px; 
    } 
    #w-1 { 
      background-color: red; 
    } 
    #w-2 { 
      background-color: blue; 
    } 
    #w-3 { 
      background-color: green; 
    }

謝謝！

來源

2013-08-02 njomi_k

首先，你需要添加'jquery' lib下，哈哈） – Praveen

我想如果我知道該怎麼添加，在標題鏈接的jQuery不會做我多好，因爲我不知道如何設置功能。 –

嘗試這種::

function onClickRight() 
    { 
     $('#mydiv').css({ 'right': '','animation-delay':'3s' }).animate({'right': '-95%'}); 
    } 

    function RightToCenter() 
    { 
     $('#mydiv').css({ 'right': '','animation-delay':'3s' }).animate({'right': ''}); 
    } 

    function onCLickLeft() 
    { 
     $('#mydiv').css({ 'left': '','animation-delay':'3s' }).animate({'left': '-95%'}); 
    } 

    function LefttoCenter() 
    { 
     $('#mydiv').css({ 'left': '','animation-delay':'3s' }).animate({'left': ''}); 
    }

來源

2013-08-02 09:22:09 Asdakamessoy

JQuery silde divs back and fort horizo​​ntal水平

回答

相關問題

JQuery silde divs back and fort horizontal水平