Почему мой анимированный 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"> \t 
 
    <a class="nu" href="">No</a> 
 
    <a class="da" href="">Yes</a> 
 
</div>

Answer 1

Не очень элегантное решение, но должен делать эту работу за вас ,

Часть кода ниже отвечает за анимацию

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 demo (including the rest of your code)

Answer 2

Использование

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

Проверить скрипку http://jsfiddle.net/7ozpqojw/10/