jQuery animate（）不起作用。爲什麼？

-1

我有一個1260px的#formsSlider;和420px的div #formsliderContainer寬度。當＃btn1函數被觸發時，如果需要的字段不爲空，我想將#formsSlider左移400px。這個序列一直持續到btn3。然後我將提交表單$ .ajax。我知道ajax部分。jQuery animate（）不起作用。爲什麼？

我試過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; 
}

來源

2015-12-21 james Oduro

使用留下一個元素 - 您必須將位置設置爲相對

.formfieldsDiv{ 
    position:relative 
}

還您可能會發現動畫滑塊，這將更好的工作：

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

來源

2015-12-21 21:48:59

jQuery animate（）不起作用。爲什麼？

回答

相關問題