为什么我的jQuery动画无法正常工作？

Question

我把我的问题弄得一团糟。 我的问题是我想滑到下一个问题，但我不知道自己在做什么错。

当我单击一个按钮时，我想滑动当前问题并滑入下一个问题。

有人可以帮我这个小提琴吗http://jsfiddle.net/7ozpqojw/3/

我在我选择的班级上使用它，当我单击按钮时，该班级已添加到新问题中。

简化示例：

 $('body').delegate('.answer_buttons a', 'click', function (e) { e.preventDefault(); $('.selected') .find('input') .val($(this).hasClass('nu') ? 'nu' : 'da') .end() .removeClass('selected') .hide() .nextAll('.question').first().show().addClass('selected'); $('.selected').animate({ "left": "-1300px" }, "slow", 'linear'); }); 

 body { margin: 0; padding: 0; text-align: center; } .question_img { margin-top: 45px; } .question img { display: block; margin: 0 auto; margin-bottom: 20px; } .content_intrebari { width: 800px; } .question { display: none; } .question.selected { display: block; } .start_section img { margin-top: 70px; } .answer_buttons { display: inline-block; margin: 20px 0; } .nu { background: transparent url('images/nu.png') no-repeat; margin-right: 60px; } .da { background: transparent url('images/da.png') no-repeat; } .nu, .da { width: 150px; height: 50px; display: inline-block; float: left; } .content_intrebari form { height: 300px; width: 800px; position: relative; overflow: hidden; } .question { position: absolute; width: 800px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="continut content_intrebari"> <div class="question_img"></div> <form action="final.php" method="post"> <input name="intr_id" value="0" type="hidden"> <p class="question selected" id="intreb_1"> <img src="images/cone.png"> <input name="intr1" value="" type="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</p> <p class="question " id="intreb_2"> <img src="images/cone.png"> <input name="intr2" value="" type="hidden">Sed tempus hendrerit orci, sed interdum quam rhoncus quis?</p> <p class="question " id="intreb_3"> <img src="images/cone.png"> <input name="intr3" value="" type="hidden">Sed tempus hendrerit orci, sed interdum quam rhoncus quis?</p> </form> </div> <div class="answer_buttons"> <a class="nu" href="">No</a> <a class="da" href="">Yes</a> </div> 

Answer 1

采用

$('.selected').removeClass('selected').next().removeClass('question').addClass('selected').animate({"left": "1300px"}, "slow", 'linear');

检查小提琴http://jsfiddle.net/7ozpqojw/10/

Answer 2

这不是一个很好的解决方案，但应该为您完成这项工作。

下面的代码部分负责动画

var animated = 1, l = $('.question').length-1;

$('body').on('click', '.answer_buttons a', function (e) {
    e.preventDefault();
    var that = $(this),
        nu = that.is('.nu'),
        next = nu ? $('.selected').prev() : $('.selected').next();
    // check whether ".selected" is last or first (or animation is in proggress), then return (do nothing):
    if((nu && $('.selected').is('.question:eq(0)')) || (!nu && $('.selected').is('.question:eq('+l+')')) || !animated) return;

    // proceed:
    animated = 0;   
    $('.selected').find('input').val('da').end().animate({
        left: (nu ? "1300px" : "-1300px")
    }, 500, function() {
        $(this).removeClass('selected');
        animated = 1;
    });
    next.css('left', (nu ? "-1300px" : "1300px")).addClass('selected').animate({
        left: "0"
    },500);

    // ... THE REST OF YOUR CODE ...
});

JSFiddle演示 （包括其余的代码）