Question

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

我已经尝试过jQuery animate（）并且它无法正常工作，但是我已经在其他元素上使用它并且它有效。有人可以帮助解决上述项目无效的原因吗？谢谢。我只是想让动画工作，我会和其他人一起锻炼。

下面是我的代码JS，CSS和HTML

HTML：

OpenCV Error: Bad flag (parameter or structure field) (Unrecognized or unsupported array type) in cvGetMat, file ..\..\..\..\opencv\modules\core\src\array.cpp

JS：

<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>

CSS：

$(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");
        }
    })
});

Answer 1

要在元素上使用left - 必须将位置设置为relative

.formfieldsDiv{
    position:relative
}

你也可能会发现动画滑块会更好：

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

jQuery animate（）不起作用。为什么？

1 个答案: