jQuery animate()不工作.为什么?

Question

我有一个1260px的#formsSlider；div#formsliderContainer的宽度为420px。当#btn1函数被触发时，如果需要的字段不为空，我想将#formsSlider向左滑动400px。这个序列一直持续到btn3。然后我将使用$.ajax提交表单。我知道ajax部分。

我尝试过jQuery animate（），但它不起作用，但我在其他元素上使用过，它起作用了。有人能帮我解释一下为什么上述项目不起作用吗？非常感谢。我只想动画工作，我会和其他人一起工作。

下面是我的代码JS、CSS和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

要在元素上使用left，必须将位置设置为相对

.formfieldsDiv{
    position:relative
}

此外，你可能会发现，设置滑块动画效果会更好：

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