所以我对 Javascript 和 Jquery 非常陌生。我想要创建的是一个两列页面，其中左列上的链接将导致右侧的 div 从左到右水平滑入，并在再次单击时滑出视图。我知道我需要使用滑动切换效果，但我无法以每个单独的链接导致不同的 div 滑动的方式实现它......我试图调整我通过谷歌搜索找到的一些 jsfiddles 但是说到javascript，我很迷茫。
到目前为止，这是我能够成功调整的唯一小提琴...
http://jsfiddle.net/bridget_kilgallon/HAQyK/
但那些垂直滑动，并在单击时加载所有 div。
这是我为不需要任何 javascript 的页面布局创建的小提琴... http://jsfiddle.net/bridget_kilgallon/NhanG/
请帮忙！ :) -布里奇特
【问题讨论】：
不幸的是，jQuery 没有现成的“水平”幻灯片动画。除非你使用更大的包，比如 jQuery UI。但我认为没有必要。
您唯一想要的就是在 jQuery 中创造性地使用 animate() 函数来实现效果。
由于描述模糊，我不知道您要使用哪一个，所以我举了两个例子来说明面板切换中的次要效果：
http://jsfiddle.net/sg3s/rs2QK/ - 这个滑动面板从左侧打开并向右关闭
http://jsfiddle.net/sg3s/RZpbK/ - 在打开新面板之前，面板从左向右滑动打开并靠近左侧。
资源：
你不能用纯 CSS 做到这一点，反正现在还不行。对转换的支持是基本的，并且仅限于基于 webkit 的浏览器。因此，既然您将需要 jQuery 巧妙地使用它，但您仍然需要确保在使用 JS 之前尽可能多地使用 css 样式。请注意，我的 JS 中没有使用任何视觉样式/操作。
【讨论】：
如果不使用 JavaScript，您只能使用 CSS 过渡（如果可用）。虽然这些都非常令人印象深刻，但就我所发现的而言，它们对于条件动画来说并不是特别好；它们基本上可以从一个起点动画到另一个点然后返回（基于浏览器本身可用的本机浏览器事件），使用 JS，您可以添加/删除其他类并让 div 元素移动到您的心脏内容，但不是“仅” 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;
}
并且这不会从侧面滑动（尽管您可以这样做），因为它看起来不太好，因为随着元素宽度的变化而发生的内容重排。
已编辑，因为我认为我可能误解了原始问题的一部分：
...我希望没有任何 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);
}
});
参考资料：
【讨论】：
<hr /> =)
dblclick，可能会弹出一个警告框，告诉他们停止它？
您可以使用 jQuery UI 中的 effects 模块并使用 show('slide')。看http://jsfiddle.net/HAQyK/1/
【讨论】：
这是您想要的代码。 已证明可在 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>
这是 JavaScript 函数中的 jQuery 部分。
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
【讨论】：
$(function () {
$("#wizardV").steps({
headerTag: "h2",
bodyTag: "section",
transitionEffect: "slideLeft",
stepsOrientation: "vertical"
});
});
*// 向导是一个包含所有内容的 div
【讨论】：