水平滑動div與JQuery

Question

所以我很新的Javascript和JQuery。我想創建的是雙列頁面，左列的鏈接將導致右側的div從左向右水平滑動，並在再次單擊時滑出視圖。我知道我需要使用幻燈片切換效果，但我無法實現它的方式，每個單獨的鏈接導致不同的div滑動...我試圖調整我通過谷歌搜索找到幾個jsfiddles，但談到JavaScript時，我很迷茫。

到目前爲止，這是唯一的小提琴，我已經能夠成功地調整... http://jsfiddle.net/bridget_kilgallon/HAQyK/
但這些幻燈片垂直，並且點擊時加載所有的div。

下面是我的希望我沒有任何JavaScript的頁面佈局創造了小提琴...... http://jsfiddle.net/bridget_kilgallon/NhanG/

請幫幫忙！ :) -Bridget

Answer 1

不幸的是，jQuery沒有現成的「水平」滑動動畫。除非你使用像jQuery UI這樣的更大的包。但我不認爲這是必要的。

你唯一想要的就是創造性地使用jQuery中的animate()函數來實現效果。

我不知道你會想要去的，因爲描述是含糊的所以我做了2例在面板開關影響很小其中之一：

http://jsfiddle.net/sg3s/rs2QK/ - 從左邊的這一個幻燈片面板打開，向右靠近

http://jsfiddle.net/sg3s/RZpbK/ - 面板從左向右滑動打開，然後靠近左側打開新面板。

資源：

• http://api.jquery.com/animate/

你不能用純CSS做到這一點，還沒有反正。對轉換的支持是基本的，並且僅限於基於webkit的瀏覽器。所以，既然你需要jQuery來巧妙地使用它，但是在使用JS之前，你仍然需要確保你儘可能的使用CSS風格。請注意，我在JS中不使用任何視覺樣式/操作。

Answer 2

您可以使用jQuery UI中的effects模塊並使用show('slide')。看看http://jsfiddle.net/HAQyK/1/

Answer 3

如果沒有使用JavaScript，只能使用CSS轉換。雖然這些非常令人印象深刻，但就我發現的情況而言，它們並不是特別好，用於條件動畫;他們基本上可以從一個起點到另一個點然後返回（基於瀏覽器本身可用的本地瀏覽器事件），使用JS可以添加/刪除其他類並讓元素移動到您的內容中，但不是用'just'CSS（儘管我很想在這方面證明是錯誤的）。

我已經能夠拿出，到目前爲止最好的是：

#left { 
    float:left; 
    width:200px; 
} 
.right { 
    height: 0; 
    background-color: #fff; 
    margin-left: 205px; 
    overflow: hidden; 
    -webkit-transition: all 1s linear; 
    -ms-transition: all 1s linear; 
    -o-transition: all 1s linear; 
    -moz-transition: all 1s linear; 
    transition: all 1s linear; 
} 
.right:target { 
    display: block; 
    height: 5em; 
    background-color: #ffa; 
    -webkit-transition: all 1s linear; 
    -ms-transition: all 1s linear; 
    -o-transition: all 1s linear; 
    -moz-transition: all 1s linear; 
    transition: all 1s linear; 
}​ 

JS Fiddle demo。

這不會從側面滑動（儘管你可以做到這一點，如果你想），因爲它看起來不太好，因爲內容重新迴流，因爲元素的寬度發生了變化。

---

編輯，因爲我想我可能誤解了原來的問題的一部分：

...我沒有任何JavaScript

喜歡既然如此，以及評論（下）似乎表明，jQuery的一個好的選擇，這可能是值得作爲示範：

​$('#left a').click(
    function(){ 
     var div = $('div').not('#left').eq($(this).index('#left a')); 
     var others = $('div[data-visible="true"]'); 
     others.each(
      function(){ 
       $(this).animate({ 
        'left' : '2000px' 
       },1000,function(){ 
        $(this).removeAttr('style data-visible'); 
       }); 
      }); 
     if (div.attr('data-visible')) { 
      div.animate({ 
       'left' : '2000px' 
      },1000,function(){ 
       $(this).removeAttr('style data-visible'); 
      }); 
     } 
     else { 
      div.animate({ 
       'left' : '210px' 
      },1000).attr('data-visible',true); 
     } 
    });​​​​​​​​ 

JS Fiddle demo。

參考文獻：

• animate()。
• attr()。
• [attribute="value"] selector。
• click()。
• each()。
• eq()。
• index()。
• not()。
• removeAttr()。

Answer 4

這是您想要的代碼。 經證實，適用於IE，Safari，Chrome，Firefox等。

以下是HTML部分。

<div id="slide-wrap" style="width:1000px; height:200px; overflow:hidden; padding:0 auto;"> 
     <div id="inner-wrap" style="float:left;"> 
      <!-- 'Put Inline contains here like below.' --> 
      <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div> 
      <!-- ... --> 
      <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div> 
      <!-- 'Put Inline contains here like above.' --> 
     </div> 
     <div style="display: block; width:40px; height:60px; position: absolute; margin-left:0px; margin-top:40px"> 
      <img id='scroll_L_Arrow' src='../assets/img/l-arrow.png' onclick="scrollThumb('Go_L')"/> 
     </div> 
     <div style="display: block; width:40px; height:60px; position: absolute; margin-left:960px; margin-top:40px"> 
      <img id='scroll_R_Arrow' src='../assets/img/r-arrow.png' onclick="scrollThumb('Go_R')"/> 
     </div> 
    </div> 

這裏是jQuery在JavaScript函數中的一部分。

 function scrollThumb(direction) { 
     if (direction=='Go_L') { 
      $('#slide-wrap').animate({ 
       scrollLeft: "-=" + 250 + "px" 
      }, function(){ 
       // createCookie('scrollPos', $('#slide-wrap').scrollLeft()); 
      }); 
     }else 
     if (direction=='Go_R') { 
      $('#slide-wrap').animate({ 
       scrollLeft: "+=" + 250 + "px" 
      }, function(){ 
       // createCookie('scrollPos', $('#slide-wrap').scrollLeft()); 
      }); 
     } 
     } 

對於隱藏箭頭請看這裏。 Detect end of horizontal scrolling div with jQuery

Answer 5

$(function() { 
$("#wizardV").steps({ 
    headerTag: "h2", 
    bodyTag: "section", 
    transitionEffect: "slideLeft", 
    stepsOrientation: "vertical" 
}); 
}); 

* //嚮導是一個包含所有內容