Question

这3个div中的每一个在6000ms内传播500px。 4000毫秒后，我想：

红色div在过去的2000毫秒内消失
绿色潜水消退超过2000毫秒
绿色div开始500px的旅程

同时。

然后，在8000ms之后，当绿色div进入其旅程的4000ms时，我想：

绿色div在过去2000毫秒内消失
黄色潜水消退超过2000毫秒
黄色div开始500px的旅程

同时。

然后，在12000毫秒，当黄色div在其旅程中的4000毫秒时，我希望它在其最后2000毫秒的旅程中淡出。

这是关于完全控制重叠动画。我尝试了queue（）和dequeue（），queue：false，setTimeout ......我无法做出它的正面或反面。我该怎么做？

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <style>
        div {
            width:50px;
            height:50px;
            position:absolute;
            left:0;
            }
        #div1 {background:red;top:0;}
        #div2 {background:green;top:55px;}
        #div3 {background:yellow;top:110px;}
        </style>
    </head>
    <body>
        <script>
        $(document).ready(function(){
            $("#div1").animate({left: "500px"}, 6000);
            $("#div2").delay(4000).animate({left: "500px"}, 6000);
            $("#div3").delay(8000).animate({left: "500px"}, 6000);
        });
        </script>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </body>
</html>

Answer 1

这是你想要实现的吗？

idArray = ['div1', 'div2', 'div3', 'div4'];
div = {};
//Create a flag for every item in list.
$(idArray).each(function(i, val) {
  div['Action' + i] = false;
});
duration = 6000; //duration of each animation
overlap = 4000; //the time when overlap happens
fadeAt = 2000; //speed at which element appear/disappear
iLikeToMoveIt(0); //initialize animation

function iLikeToMoveIt(i) {
  $now = $("#" + idArray[i]); //animation element
  $next = $("#" + idArray[++i]); //next element
  $now.fadeIn(fadeAt).animate({
    left: "500px"
  }, {
    duration: 6000,
    queue: false,
    progress: function(animation, progress, remainingMs) {
      //check if flag is not set
      if (!div['Action' + i] && remainingMs < fadeAt) {
        //set the flag
        div['Action' + i] = true;
        $(this).fadeOut(fadeAt);
        if ($next.length) {
          //call function for next div
          iLikeToMoveIt(i);
        }
      }
    }
  });
}

div {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
}
.hide {
  display: none;
}
#div1 {
  background: red;
  top: 0;
}
#div2 {
  background: green;
  top: 55px;
}
#div3 {
  background: yellow;
  top: 110px;
}
#div4 {
  background: blue;
  top: 165px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2" class="hide"></div>
<div id="div3" class="hide"></div>
<div id="div4" class="hide"></div>

Answer 2

您可以使用css

的transition start和step，.animate()个选项

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <style>
    div {
      width: 50px;
      height: 50px;
      position: absolute;
      left: 0;
      transition: opacity 2.5s ease;
    }
    #div1 {
      background: red;
      top: 0;
    }
    #div2 {
      background: green;
      top: 55px;
      opacity:0;
    }
    #div3 {
      background: yellow;
      top: 110px;
      opacity:0;
    }
  </style>
</head>

<body>
  <script>
    $(document).ready(function() {
      
      function step(now, fx) {
        var n = Math.round(now)
        if (n === 250 || n === 251) {         
          $(this).css("opacity", 0)
        }
      }
      
      function start() {
        $(this).css("opacity", 1)
      }
      
      $("#div1").animate({
        left: "500px"
      }, {
        duration: 6000,
        step:step
      });
      $("#div2").delay(4000).animate({
        left: "500px"
      }, {
        duration: 6000,
        start:start,
        step:step
      });
      $("#div3").delay(8000).animate({
        left: "500px"
      }, {
        duration: 6000,
        start:start,
        step:step
      });
    });
  </script>
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
</body>

</html>

＆＃13;

如何在不排队的情况下解锁动画？

2 个答案: