水平滑动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" 
}); 
}); 

* //向导是一个包含所有内容