jQuery animate() не работает. Зачем?

Question

У меня есть #formsSlider с 1260px; и div #formsliderContainer шириной 420 пикселей. Я хочу сдвинуть #formsSlider слева 400px, когда функция # btn1 запущена, и если требуемые поля не пустые. Эта последовательность продолжается до btn3.Then я отправлю форму с $ .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

Чтобы использовать влево на элементе - вы должны установить положение относительно

.formfieldsDiv{ 
    position:relative 
} 

также вы можете обнаружить, что анимация слайдера это будет работать лучше:

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