javascript - 如何在 jQuery 中创建无限循环？

Question

我正在用无限循环处理 jQuery 动画，我的代码如下:

var width = $(document).width() - $('#mydiv').width();
$(document).ready(function() {
  function animateMydiv() {
    $('#mydiv').animate({
        'left': width + 'px'
      }, 9000,

      function() {
        $('#test').css({
          opacity: 1.0,
          visibility: "visible"
        }, 9000).animate({
          opacity: 0
        }, 9000);
      }).animate({
      'left': '0px'
    }, 9000);
  }

  animateMydiv();
});

#mydiv {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  background: black;
}
#test {
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 50;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv"></div>
<p id="test">
  Hi welcome...!!
</p>

我使用 animateMydiv() 无限循环，但它不起作用。

Answer 1

这里不需要 JS 代码，您可以使用 @keyframes 和 animation 单独使用 CSS 来实现您正在做的事情。试试这个:

#mydiv {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  background: black;
  animation: slider 9s infinite; 
}
#test {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 50;
  animation: blinker 9s infinite; 
}
@keyframes slider {
  0% { left: 0; }
  50% { left: 95%; }
  100% { left: 0; }
}
@keyframes blinker {
  50% { opacity: 0; }
  55% { opacity: 1; }
  100% { opacity: 0; }
}

<div id="mydiv"></div>
<p id="test">
  Hi welcome...!!
</p>