Question

我正在制作物体并排移动的东西，我把那部分放下了。

但我遇到的问题是，当我尝试使用两个新函数上下移动一些对象时，它没有正确地向上和向下动画，对象8应该是向上/向下动画。

下面我将提供一些代码以及小提琴。

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

这就是函数相对来说的样子，下面是一个小提琴。

小提琴是HERE。

Answer 1

通过在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>

Answer 2

您在...中输入了错误的ID

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

......应该......

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

您也只是在小提琴中使用marginLeft，您可能希望将其更改为marginTop以垂直移动对象。

Jquery一次运行几个函数

2 个答案: