Question

$('.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（）进程。

好像我需要将第2行中的html元素切换为.box（现在为空白）

这里小提琴： http://jsfiddle.net/stupaul22/JwC65/5/

Answer 1

试试这个：http://jsfiddle.net/Q39YX/2/

我在当前有效问题中添加了active类，我将其用作选择器而不是this。

修改：我添加了以下内容：

将问题和按钮放在不同的容器中，以避免next()选择按钮。

将:last-child和:first-child选择器与:not一起使用，以避免在单击后退按钮时选择第一个问题，并在单击前进按钮时选择最后一个问题。< / p>

 $('.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);
 });

jQuery绑定函数和（this）用法

1 个答案: