Q:

Why my jQuery animate does not work correctly?

I've made a fiddle of my problem. My problem is that I want to slide to the next question and I don't know what am I doing wrong.
When I click on a button I want to slide the current question and slide in the next one.
Can anyone help me please with this fiddle http://jsfiddle.net/7ozpqojw/3/
I'm using this on my selected class which is added to the new question when I click a button.
Simplified example:

$('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>

A:

Not really an elegant solution but should do the job for you.
The part of the code below is responsible for animations
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)

