如何使用Jquery滑动元素
单击按钮时,我就像制作幻灯片一样有问题。
我看到了一些例子,但是tehy非常复杂。 我试着用这个。
$("#btn").click(function() { $('.box.box1').hide('slide', {direction: 'left'}, 1000);});
这是我的jsfiddle: https ://jsfiddle.net/d6x66kb2/3/,因为下面的代码在代码段中不起作用
单击下一个幻灯片按钮时,#1框将向左滑动并消失。 它应该是#2,#3,#4和#5盒子。 所以,所以堡垒。
如何将box1代码应用于其余框。
$("#btn").click(function() { $('.box.box1').hide('slide', { direction: 'left' }, 1000); });
#test { width: 100px; min-height: 100px; } .container { width: 250px; height: 250px; border: 1px dotted red; } .inner-container { width: 1250px; } .inner-container:after { display: block; clear: both; content: ""; } .box { float: left; background: green; width: 250px; height: 250px; opacity: 0.4; padding: 104px; font-size: 36px; box-sizing: border-box; color: #fff; text-align: center; } button { margin-top: 20px; }
1 2 3 4 5
这是一个更简单的版本。 每次单击隐藏第一个可见框,并在单击其他按钮时显示最后一个不可见
$("#next").click(function() { $(".box:visible").eq(0).hide('slide', { direction: 'left' }, 1000); }); $("#previous").click(function() { $(".box").not(":visible").last().show('slide', { direction: 'left' }, 1000); });
FIDDLE因为stacksnippets由于某种原因今天不喜欢这个代码
在Javascript中试用此代码
var count = 1; $("#btn").click(function() { $('.box'+count).hide('slide', {direction: 'left'}, 1000); count +=1; });
希望这可以帮到你。