使用按钮和jQuery从左或右滑动DIV
Slide DIV's from left or right using buttons and jQuery
我正在尝试创建一个函数,该函数可以根据您在此过程中的步骤从左或右滑动div。
这是我的基本结构:
<button type="submit" id="button1">Go to Step 1</button>
<button type="submit" id="button2">Go to Step 2</button>
<button type="submit" id="button3">Go to Step 3</button>
<div id="container">
<div id="div1">Text 1</div>
<div id="div2">Text 2</div>
<div id="div3">Text 3</div>
</div>
使用jQuery我有这个,但这不是我想要的:
$('#div1').animate({'width': 0}, 500,function(){ // Slides DIV to left
$('#div1').css('display','none');
$('#div1').css('width', 1100); // Set the correct with on DIV again
$('#div2').fadeIn('slow'); // Fade in new DIV
});
我所追求的是当我在步骤 1 中并按下按钮 2(转到步骤 2)时,我希望div2 从右侧滑入(在容器div 内)。当我在步骤 3 中并按下按钮 1(转到步骤 1)时,我希望div1 从左侧(在容器div 内)滑入,而不会在途中看到div2。我看了不同的jQuery滑块,但它们都处理图片。
这里有一个示例,它按照我想要实现的目标做了一些事情,但没有左/右幻灯片功能:http://jsfiddle.net/andrewwhitaker/2uV2h/(来源:如何使用jQuery滑动div的关闭/打开页面)。如有不清楚之处,请提问:)提前谢谢。
JSFIDDLE: https://jsfiddle.net/t5qnw5v5/3/
nkwinder 已经发布了一个带有 jQuery 插件的答案,但我继续将 jQuery 完全排除在问题之外,我不知道你是否喜欢那个,但如果你想要那个解决方案,它就在这里 https://jsfiddle.net/3ydpa3oL/,我什至可能修改了你的 jsfiddle,不知道该页面是如何工作的。
我做了什么:
我在 #container 中放了另一个元素,以便它包含所有 .box 并将其命名为 #slider。
<div id="container">
<div id="slider"> <!-- NEW ELEMENT NEEDED -->
<div id="div1" class="boxes">Text 1</div>
<div id="div2" class="boxes">Text 2</div>
<div id="div3" class="boxes">Text 3</div>
</div>
</div>
.boxes
{
width: 50px; // CAUSE I DID NOT WANT TO MESS AROUND TOO MUCH
height: 20px; // CAUSE I DID NOT WANT TO MESS AROUND TOO MUCH
font-size: 1em; // CAUSE I DID NOT WANT TO MESS AROUND TOO MUCH
float: left; // SO THAT THEY SLIDE LEFT AND RIGHT
}
#container
{
width: 50px; // WINDOW EFFECT
height: 20px; // WINDOW EFFECT
display: block;
overflow: hidden; // WINDOW EFFECT
}
#slider
{
position: relative;
width: 200px; // ENCLOSE .boxes
transition: left 1s; // NO JQUERY
}
#div1 {
background-color: green;
}
#div2 {
background-color: blue;
}
#div3 {
background-color: orange;
}
所有 .box 必须始终可见,并且容器必须将溢出属性设置为隐藏,以便裁剪其大小之外的所有内容。 #slider 是为了使 float:left 工作,否则 .box 的大小为 #container 并且表现不佳。
现在很容易在div 上有一个漂亮的动画,在 #slider 上有一个简单的过渡属性,因为我们只是移动这个元素,并且因为 #container 剪辑了它之外的所有内容,我们得到了滑动 .box 的良好效果。
请记住,这种方法会迫使您编写一些额外的代码(不是我提供的)来调整 #slider 的大小,否则 float:left 将无法正常运行,并且 .box 将出现在彼此之上,这将破坏效果。你可以使用 display:flex 来解决这个问题,如果你能自由使用 CSS3。
我建议使用 http://jquery.malsup.com/cycle2/demo/non-image.php您不仅可以滑动div的图像。您不必使用自定义代码实现滑动。
- 单击按钮时Div Increment
- 单击javascript按钮显示/隐藏Div元素
- 点击一个按钮,有没有一种方法可以检查Div内部的图像
- 增加DIV数字变量的按钮
- 单击按钮调整Div Width的大小
- 将必需属性添加到DIV On单选按钮更改中的输入
- 切换一个Div与按钮改变左边距属性
- 在新窗口中打开DIV按钮
- 如何使“按钮”在鼠标按下时创建一个可移动的 DIV,并将“鼠标按下”切换到新的 DIV
- 使用显示/隐藏单选按钮将数组打印到 Div
- 显示/隐藏 Div 仅由按钮触发
- 使用两个或多个按钮在单个DIV中显示/隐藏和替换文本
- 弹出 Div 显示在按钮悬停上
- 如何使用单个按钮执行单击事件以选择不同的 DIV
- 使用 JQuery 从 Div Table 中的按钮中获取值 - 用 JavaScript 制作
- 根据选定的单选按钮输入显示/隐藏 DIV
- 使用不同的按钮滑动不同的 DIV,但使用 Javascript 具有相同的 ID
- 重复的DIV's按钮不起作用
- 单击DIV按钮上的事件
- JQuery显示隐藏多个Div按钮