jQuery animate() not working. Why?

Question

I have a #formsSlider with of 1260px; and a div #formsliderContainer width of 420px. I want to slide #formsSlider left 400px when #btn1 function is triggered and if required fields are not empty. This sequence continue until the btn3.Then I will submit the form with $.ajax. I know the ajax part.

I have tried jQuery animate() and its not working but I have use on other element and it works. Can somebody help with why the above project is not working? Thank you. I just want to animation to work and I will work out with the rest.

below are my codes JS,CSS and HTML

HTML:

<script src"scripts/jquery.js"></scripts> <!-- I have downloaded jquery LIBRARY CDN to my local disk -->
<form name="postform"  class="jobpostform" method="post" action="">
 <div id="formsliderContainer">

        <div id="formslider"><!--Slider-->

            <div class="formfieldsDiv">
            <!--some  html form here-->

            <button id"btn1">Continue</button>
            </div>

            <div class="formfieldsDiv">
            <!--some  html form here-->

            <button id"btn2">Continue</button>
            </div>

            <div class="formfieldsDiv">
            <!--some  html form here-->

            <button id"btn3">Post</button>
            </div>

        </div>

 </div>
 </form>

JS:

$(document).ready(function(postevent) {
    $(".jobpostform").on('submit', function(postevent) {
        //stop the form from submitting
        postevent.preventDefault();
    })

    //animation if required fields is okay
    $("#btn1").click(function() {
        var jobtype = $("#jobtype").val();
        var jobtitle = $("#jobtitle").val();
        var joblevel = $("#joblevel").val();
        var joblocation = $("#joblocation").val();
        var jobexperience = $("#jobexperience").val();
        var qualification = $("#qualification").val();
        if (jobtype != "" && jobtitle != "" && joblevel != "" && joblocation != "" && jobexperience != "" && qualification != "") {

            //getting data form diveone fields
            var divoneData = "jobtype=" + jobtype + "&jobtitle=" + jobtitle + "&joblevel=" + joblevel + "&joblocation=" + joblocation + "&jobexperience=" + jobexperience + "&qualification=" + qualification;

            $("#formslider").animate({
                left: "400px;"
            });
        } else {
            alert("Please all fields are required");
        }
    })
});

CSS:

#formsliderContainer {
    width: 420px;
    height: 390px;
    background-color: black;
}

#btn1,
#btn2 {
    float: right;
    background-color: #0033CC;
    color: #FFFFFF;
    border: none;
    padding: 5px;
    border-radius: 3px;
    cursor: pointer;
    width: auto;
    background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0%, rgba(1, 119, 204, 1.00)), color-stop( 100%, rgba(51, 175, 255, 1.00)));
    background-image: -webkit-linear-gradient(270deg, rgba(1, 119, 204, 1.00) 0%, rgba(51, 175, 255, 1.00) 100%);
    background-image: linear-gradient(180deg, rgba(1, 119, 204, 1.00) 0%, rgba(51, 175, 255, 1.00) 100%);
}

.formfieldsDiv {
    width: 380px;
    padding: 20px;
    float: left;
    background-color: #ccc;
    height: 390px;
}

#formslider {
    width: 1260px;
    height: 370px;
}

Answer 1

To use left on an element - you must set the position to relative

.formfieldsDiv{
    position:relative
}

also you may find that animating a slider this would work better:

 $("#formslider").animate({
     left: "+=400"
  });