$('.box').click(function () {
$(this).animate({
left: '-50%'
}, 500, function () {
$(this).css('left', '150%');
$(this).appendTo('#container');
});
$(this).next().animate({
left: '50%'
}, 500);
});
这段代码非常适合在屏幕上一个接一个地设置无限<div class="box">
的动画。可以单击div上的任意位置使其具有动画效果。在这些div中有多项选择题,我希望动画在下一个按钮<button class="forward">
上触发。
如何将click函数放在.forward元素的第一行,并在列表中保留(this(和next((的进度。
似乎我需要将html元素切换到第2行的.box(现在为空(
Fiddle here:http://jsfiddle.net/stupaul22/JwC65/5/
试试这个:http://jsfiddle.net/Q39YX/2/
我在当前活动问题中添加了一个active
类,并将其用作选择器,而不是this
。
编辑:我添加了以下内容:
- 将问题和按钮放在单独的容器中,以避免
next()
选择按钮 -
将
:last-child
和:first-child
选择器与:not
一起使用,以避免在单击后退按钮时选择第一个问题,在单击前进按钮时选择最后一个问题。$('.forward').click(function() { $('.active:not(:last-child)').animate({ left: '-50%' }, 500); $('.active:not(:last-child)').removeClass('active').next().addClass('active').animate({ left: '50%' }, 500); }); $('.back').click(function() { $('.active:not(:first-child)').animate({ left: '150%' }, 500); $('.active:not(:first-child)').removeClass('active').prev().addClass('active').animate({ left: '50%' }, 500); });