한 번에 여러 함수를 실행하는 Jquery

Question

개체를 좌우로 움직이는 무언가를 만들고 있는데, 나는 그 부분을 내렸다.

하지만 문제는 두 가지 새로운 기능을 사용하여 위아래로 움직이는 일부 개체를 위아래로 올바르게 움직이지 못하게하려고 할 때 개체 8이 위/아래로 움직이는 애니메이션이어야한다는 것입니다.

아래는 필자뿐만 아니라 몇 가지 코드를 제공합니다.

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

다음은 기능이 상대적으로 보이는 것입니다. 아래는 피들입니다.

피들은 HERE입니다.

Answer 1

당신은에 ...

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

이 이

...해야 ...

또한 만 바이올린에 marginLeft을 사용하는

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

, 당신은 할 수 있습니다 잘못된 ID를 가지고 marginTop으로 변경하여 개체를 세로로 이동합니다.

Answer 2

코드는 HTML의 클래스를 사용하고 div를 애니메이션하는 재귀 함수를 사용하여 크게 단순화 할 수 있습니다. 아래의 주석을 참조하십시오 :

다음

도 a working 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>