使用 JQuery 水平滑动 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9864305/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sliding divs horizontally with JQuery
提问by Bridget Kilgallon
so I'm very new to Javascript and Jquery. What I'd like to create is a two column page where links on the left column will cause a div on the right to slide in horizontally from left to right, and slide out of view when clicked again. I know I need to use slide toggle effect but I'm having trouble implementing it in a way that each individual link causes a different div to slide... I've attempted to tweak a few jsfiddles I've found via google searches but I'm pretty lost when it comes to javascript.
所以我对 Javascript 和 Jquery 很陌生。我想要创建的是一个两列页面，其中左列上的链接将导致右侧的 div 从左向右水平滑动，再次单击时滑出视图。我知道我需要使用滑动切换效果，但我无法以每个单独的链接导致不同的 div 滑动的方式实现它......我试图调整我通过谷歌搜索找到的一些 jsfiddles 但是说到 javascript，我很迷茫。
So far this is the only fiddle I've been able to tweak successfully...
http://jsfiddle.net/bridget_kilgallon/HAQyK/
but those slide vertically, and load all the divs when clicked.
到目前为止，这是我能够成功调整的唯一小提琴...
http://jsfiddle.net/bridget_kilgallon/HAQyK/
但那些垂直滑动，并在单击时加载所有 div。
Here's a fiddle I've created for the pagelayout I'd like without any javascript... http://jsfiddle.net/bridget_kilgallon/NhanG/
这是我为没有任何 javascript 的页面布局创建的小提琴... http://jsfiddle.net/bridget_kilgallon/NhanG/
Please help! :) -Bridget
请帮忙！:) -布里奇特
回答by sg3s
Unfortunately there is no ready made 'horizontal' slide animation with jQuery. Unless you go with bigger packages like jQuery UI. But I don't think that is needed.
不幸的是，jQuery 没有现成的“水平”幻灯片动画。除非你使用更大的包，比如 jQuery UI。但我不认为这是必要的。
The only thing you want is some creative use of the animate()function in jQuery to achieve an effect.
您唯一需要的是创造性地使用animate()jQuery中的函数来实现效果。
I didn't know which one you'd want to go with since the description was vague so I made 2 examples for minor effects in panel switching:
由于描述含糊不清，我不知道您想选择哪一个，因此我为面板切换中的小效果做了两个示例：
http://jsfiddle.net/sg3s/rs2QK/- This one slides panel open from the left and to close to the right
http://jsfiddle.net/sg3s/rs2QK/- 这一个滑动面板从左侧打开并向右关闭
http://jsfiddle.net/sg3s/RZpbK/- Panels slide open from left to right and close to the left befor opening the new one.
http://jsfiddle.net/sg3s/RZpbK/- 面板从左向右滑动打开，并在打开新面板之前靠近左侧。
Resources:
资源：
You can't do this with pure CSS, not yet anyways. The support for transitions is basic and limited to pretty much only webkit based browsers. So since you're going to need jQuery make smart use of it, but you still need to make sure you style as much as possible with css before you use the JS. Note that I don't use any visual styling / manipulations in my JS.
你不能用纯 CSS 做到这一点，反正现在还不行。对转换的支持是基本的，并且几乎仅限于基于 webkit 的浏览器。因此，由于您将需要 jQuery 来巧妙地使用它，但是在使用 JS 之前，您仍然需要确保尽可能多地使用 css 进行样式设置。请注意，我没有在我的 JS 中使用任何视觉样式/操作。
回答by David says reinstate Monica
Without using JavaScript you're limited to using CSS transitions, where available. And while these are pretty impressive, they're not particularly great, so far as I've yet found, for conditional animation; they can basically animate from a starting point to another point and then back (based on the native browser events available in the browser itself), with JS you could add/remove additional classes and have the divelements move around to your heart's content, but not with 'just' CSS (though I'd love to be proven wrong on this).
在不使用 JavaScript 的情况下，您只能使用 CSS 过渡（如果可用）。虽然这些非常令人印象深刻，但就我发现的条件动画而言，它们并不是特别好；它们基本上可以从一个起点到另一个点然后返回（基于浏览器本身中可用的本机浏览器事件），使用 JS，您可以添加/删除其他类并使div元素移动到您的心脏内容，但不是使用“只是”CSS（尽管我很想在这方面被证明是错误的）。
The best I've been able to come up with, so far, is:
到目前为止，我能想到的最好的是：
#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;
}?
And this doesn't slide from the side (though you can do that if you want to) because it didn't look good, given the content re-reflow that was happening as the width of the element changed.
并且这不会从侧面滑动（尽管如果您愿意，您可以这样做）因为它看起来不太好，因为随着元素的宽度改变而发生的内容重新回流。
Editedbecause I think I may have misinterpreted a portion of the original question:
编辑是因为我认为我可能误解了原始问题的一部分：
...I'd like without any javascript
...我想要没有任何 javascript
That being the case, and the comment (below) seems to suggest that jQuery's an okay option, this might be worthwhile as a demonstration:
既然如此，评论（下面）似乎表明 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);
}
});????????
References:
参考：
回答by elclanrs
You could use the effectsmodule from jQuery UI and use show('slide'). Look http://jsfiddle.net/HAQyK/1/
您可以使用effectsjQuery UI 中的模块并使用show('slide'). 看http://jsfiddle.net/HAQyK/1/
回答by NOTSermsak
Here is the code that you want. It's proved that works on IE, Safari, Chrome, Firefox, etc.
这是您想要的代码。事实证明，它适用于 IE、Safari、Chrome、Firefox 等。
Here is the HTML part.
这是 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>
Here is jQuery part in JavaScript function.
这是 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());
});
}
}
For hiding the arrows please looking here. Detect end of horizontal scrolling div with jQuery
要隐藏箭头，请看这里。使用jQuery检测水平滚动div的结束
回答by Cosii Riggz
$(function () {
$("#wizardV").steps({
headerTag: "h2",
bodyTag: "section",
transitionEffect: "slideLeft",
stepsOrientation: "vertical"
});
});
*// wizard is a div containing all your content
*// 向导是一个包含所有内容的 div
