jQuery一次運行多個功能

Question

我正在做一些物體左右移動的事情，我把那部分放下來了。

但是我遇到的問題是，當我嘗試使用兩個新功能讓某些對象上下移動時，它無法正確地對上下動畫設置，對象8應該順便進行上下動畫設置。

下面，我將提供一些代碼以及一個小提琴。

  function animateRight() {
    $(fourLevelMoveone).stop().animate({
        'marginLeft': "+=220px" //moves left
    }, 1100, animateLeft);
  }

這就是相對的功能，下面是一個小提琴。

小提琴在這里 。

Answer 1

通過在html中使用類並使用遞歸函數為div設置動畫，可以大大簡化代碼。 請參閱下面的評論：）

這也是一個正在工作的jsFiddle ，看到那里的所有內容要容易一些

 $(document).ready(function() { // to start create an array of the numbers // for the elements you'd like to animate // here we'll animate divs 7, 6, and 17 var elements = [7, 6, 17]; // create an object to hold our options var options = {'marginLeft':'+=220'}; // call our function passing in our elements // and our options animateMyElements(elements, options); // do the same thing but with different divs // and with different options var elements = [18, 16, 15]; var options = {'marginTop':'+=220'}; animateMyElements(elements, options); //this function does all the annimating function animateMyElements(elements, options){ // loop through each number in our `elements` array $(elements).each(function(index, element){ // use jquery's `eq()` to find the div for each number // and apply our animation to it $('.annimations:eq('+(element-1)+')').stop().animate( options , 1100, function() { // when the animation completes, // get the first key in our `options` object // this will be the property we are animating for (var first in options) break; // get the first key's value then reverse it // if it was '+=' before, make it '-=' now, and vice versa var offset = options[first].slice(0,1) == '+' ? '-' : '+'; var reverseDistance = options[first].replace(/[\\+-]/, offset); // use our reversed options to call ` animateMyElements()` again // reversing the animation var reverseOptions = {}; reverseOptions[first] = reverseDistance; animateMyElements(elements, reverseOptions); }); }); } }); 

 #outline { height: 5000px; width: 320px; border: black 1px solid; position: absolute; } .annimations:nth-child(1) { height: 50px; width: 220px; margin-left: 100px; border: 2px solid red; margin-top: 4650px; position: absolute; } .annimations:nth-child(2) { height: 50px; width: 180px; border: 2px solid red; margin-top: 4380px; margin-left: 97px; position: absolute; } .annimations:nth-child(3) { height: 50px; width: 200px; border: 2px solid red; margin-top: 4110px; position: absolute; } .annimations:nth-child(4) { height: 50px; width: 200px; border: 2px solid red; margin-top: 3840px; margin-left: 120px; position: absolute; } .annimations:nth-child(5){ height: 50px; width: 130px; border: 2px solid red; margin-top: 3570px; position: absolute; } .annimations:nth-child(6) { height: 50px; width: 170px; border: 2px solid red; margin-top: 3300px; margin-left: 70px; position: absolute; } .annimations:nth-child(7) { height: 50px; width: 80px; border: 2px solid red; position: absolute; margin-top: 3030px; } .annimations:nth-child(8){ height: 50px; width: 100px; border: 2px solid red; margin-top: 2760px; position: absolute; margin-left: 100px; } .annimations:nth-child(9) { height: 50px; width: 80px; border: 2px solid red; margin-top: 2490px; position: absolute; } .annimations:nth-child(10) { height: 50px; width: 120px; border: 2px solid red; margin-top: 2220px; margin-left: 100px; position: absolute; } .annimations:nth-child(11) { height: 50px; width: 220px; border: 2px solid red; margin-top: 1950px; position: absolute; } .annimations:nth-child(12) { height: 50px; width: 170px; border: 2px solid red; margin-top: 1680px; margin-left: 160px; position: absolute; } .annimations:nth-child(13) { height: 50px; width: 200px; border: 2px solid red; margin-top: 1410px; position: absolute; } .annimations:nth-child(14) { height: 50px; width: 130px; border: 2px solid red; margin-top: 1140px; margin-left: 190px; position: absolute; } .annimations:nth-child(15){ height: 50px; width: 200px; border: 2px solid red; margin-top: 870px; margin-left: 70px; position: absolute; } .annimations:nth-child(16) { height: 50px; width: 80px; border: 2px solid red; margin-top: 600px; margin-left: 240px; position: absolute; } .annimations:nth-child(17) { height: 50px; width: 80px; border: 2px solid red; margin-top: 330px; position: absolute; } .annimations:nth-child(18){ height: 50px; width: 320px; border: 2px solid #249E2E; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="outline"> <div class="annimations">1</div> <div class="annimations">2</div> <div class="annimations">3</div> <div class="annimations">4</div> <div class="annimations">5</div> <div class="annimations">6</div> <div class="annimations">7</div> <div class="annimations">8</div> <div class="annimations">9</div> <div class="annimations">10</div> <div class="annimations">11</div> <div class="annimations">12</div> <div class="annimations">13</div> <div class="annimations">14</div> <div class="annimations">15</div> <div class="annimations">16</div> <div class="annimations">17</div> <div class="annimations">18</div> <div id ="black"></div> </div> 

Answer 2

您輸入的ID錯誤...

var fourLevelMove = ["#DseventhObj", "#CsixteenObj", "#CseventeenObj"];

...應該...

var fourLevelMove = ["#DseventhObj", "#DsixteenObj", "#DseventeenObj"];

您還只在小提琴中使用marginLeft，您可能需要將其更改為marginTop以垂直移動對象。