jQuery - 函数不循环

Question

我为我的网站制作了一个无限动画，位置发生了变化，但是函数没有回调或者没有循环。它会在所有位置更改后停止。

有例子 - JSFiddle 有代码

$(document).ready(function() {
    function animations(){
        var time = 500;
        // FIRST CIRCLE
        $(".circle-1").animate({left: '0%', top: '0%'}, time);
        $(".circle-1").animate({left: '25%', right: '0', top: '100%'}, time);
        $(".circle-1").animate({left: '50%', right: '0', top: '0'}, time);
        $(".circle-1").animate({left: '75%', right: '0', top: '100%'}, time);
        $(".circle-1").animate({left: '100%', right: '0', top: '0'}, time);
        $(".circle-1").animate({left: '50%', right: '0', top: '100%'}, time);
        // SECOND CIRCLE
        $(".circle-2").animate({left: '50%', right: '0', top: '0%'}, time);
        $(".circle-2").animate({left: '100%', right: '0', top: '100%'}, time);
        $(".circle-2").animate({left: '0%', right: '0', top: '50%'}, time);
        $(".circle-2").animate({left: '100%', right: '0', top: '0%'}, time);
        $(".circle-2").animate({left: '0%', right: '0', top: '100%'}, time);

        // THIRD CIRCLE
        $(".circle-3").animate({left: '0%', right: '0', top: '0%'}, time);
        $(".circle-3").animate({left: '100%', right: '0', top: '50%'}, time);
        $(".circle-3").animate({left: '0%', right: '0', top: '100%'}, time);
        $(".circle-3").animate({left: '25%', right: '0', top: '0%'}, time);
        $(".circle-3").animate({left: '50%', right: '0', top: '100%'}, time);
        $(".circle-3").animate({left: '75%', right: '0', top: '0'}, time);
        $(".circle-3").animate({left: '100%', right: '0', top: '100%'}, time);
    }animations();
});

也许有人有想法，如何缩短这个：）

Answer 1

使用setInterval()一段时间。

setInterval(animations,3000);

＆＃13;

＆＃13;

$(document).ready(function() {
  function animations() {
    var time = 500;
    // FIRST CIRCLE
    $(".circle-1").animate({
      left: '0%',
      top: '0%'
    }, time);
    $(".circle-1").animate({
      left: '25%',
      right: '0',
      top: '100%'
    }, time);
    $(".circle-1").animate({
      left: '50%',
      right: '0',
      top: '0'
    }, time);
    $(".circle-1").animate({
      left: '75%',
      right: '0',
      top: '100%'
    }, time);
    $(".circle-1").animate({
      left: '100%',
      right: '0',
      top: '0'
    }, time);
    $(".circle-1").animate({
      left: '50%',
      right: '0',
      top: '100%'
    }, time);
    // SECOND CIRCLE
    $(".circle-2").animate({
      left: '50%',
      right: '0',
      top: '0%'
    }, time);
    $(".circle-2").animate({
      left: '100%',
      right: '0',
      top: '100%'
    }, time);
    $(".circle-2").animate({
      left: '0%',
      right: '0',
      top: '50%'
    }, time);
    $(".circle-2").animate({
      left: '100%',
      right: '0',
      top: '0%'
    }, time);
    $(".circle-2").animate({
      left: '0%',
      right: '0',
      top: '100%'
    }, time);

    // THIRD CIRCLE
    $(".circle-3").animate({
      left: '0%',
      right: '0',
      top: '0%'
    }, time);
    $(".circle-3").animate({
      left: '100%',
      right: '0',
      top: '50%'
    }, time);
    $(".circle-3").animate({
      left: '0%',
      right: '0',
      top: '100%'
    }, time);
    $(".circle-3").animate({
      left: '25%',
      right: '0',
      top: '0%'
    }, time);
    $(".circle-3").animate({
      left: '50%',
      right: '0',
      top: '100%'
    }, time);
    $(".circle-3").animate({
      left: '75%',
      right: '0',
      top: '0'
    }, time);
    $(".circle-3").animate({
      left: '100%',
      right: '0',
      top: '100%'
    }, time);
  }

  animations();
  setInterval(animations, 3000);
});

＆＃13;

html {
  width: 100%;
  height: 100%
}

body {
  width: 100%;
  height: 100%;
  overflow: hidden
}

.page {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.page {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  /*background-image: url('../images/grid.svg');*/
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: #0099ff;
  /* Old browsers */
  background-color: -moz-linear-gradient(top, #0099ff 0%, #085c8b 100%);
  /* FF3.6-15 */
  background-color: -webkit-linear-gradient(top, #0099ff 0%, #085c8b 100%);
  /* Chrome10-25,Safari5.1-6 */
  background-color: linear-gradient(to bottom, #0099ff 0%, #085c8b 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0099ff', endColorstr='#085c8b', GradientType=0);
  /* IE6-9 */
}

.page .anim-elem {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10;
}

.page .anim-elem .circle {
  display: flex;
  align-items: center;
  position: absolute;
  background: rgba(255, 255, 255, 0.25);
  width: 32px;
  height: 32px;
  border-radius: 100%;
  /* transform: translate(-32px);*/
  margin: -16px -16px
}

.page .anim-elem .circle:after {
  content: '';
  background: white;
  content: '';
  background: white;
  width: 14px;
  height: 14px;
  border-radius: 100%;
  position: absolute;
  margin: 0 8px;
  left: 0;
  right: 0;
}

.page .anim-elem .circle.circle-1 {
  top: 100%;
  left: 50%;
}

.page .anim-elem .circle.circle-2 {
  top: 100%;
  left: 0%;
}

.page .anim-elem .circle.circle-3 {
  top: 100%;
  left: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="page">


  <div class="anim-elem">
    <div class="circle circle-1"></div>
    <div class="circle circle-2"></div>
    <div class="circle circle-3"></div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

要使其无限，只需在

中调用动画功能

setInterval(function, time)

setInterval

Answer 3

希望，这对你有用。 而且我不确定你是否需要右侧。 https://jsfiddle.net/farang/zdnhodwh/

$(document).ready(function () {
function animations(circles, timeout) {
    var time = 500;

    circles.map(function (circle) {
        var cords = circle.values;

        cords.left.map(function (leftCoord, index) {
            $(circle.selector).animate({ left: leftCoord + '%', right: cords.right[index], top: cords.top[index] + '%' }, time);
        })
    });

    setTimeout(function(){
        animations(circles, timeout);
    }, timeout)
}

animations([
    {
        selector: ".circle-1",
        values: {
            left: [0, 25, 50, 75, 100, 50],
            right: [0, 0, 0, 0, 0, 0],
            top: [100, 0, 100, 0, 100]
        }
    },
  {
      selector: ".circle-2",
      values: {
          left: [50, 100, 0, 100, 0],
          right: [0, 0, 0, 0, 0],
          top: [0, 100, 50, 0, 100]
      }
  },
  {
      selector: ".circle-3",
      values: {
          left: [0, 100, 0, 25, 50, 75, 100],
          right: [0, 0, 0, 0, 0, 0, 0],
          top: [0, 50, 100, 0, 100, 0, 100]
      }
  }
], 2000); });

Answer 4

以下代码有效

＆＃13;

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title> Sample Code </title>
  <style>
    html {
      width: 100%;
      height: 100%
    }
    
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    
    .page {
      overflow: hidden;
      width: 100%;
      height: 100%;
    }
    
    .page {
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      align-items: center;
      /*background-image: url('../images/grid.svg');*/
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      background-color: #0099ff;
      /* Old browsers */
      background-color: -moz-linear-gradient(top, #0099ff 0%, #085c8b 100%);
      /* FF3.6-15 */
      background-color: -webkit-linear-gradient(top, #0099ff 0%, #085c8b 100%);
      /* Chrome10-25,Safari5.1-6 */
      background-color: linear-gradient(to bottom, #0099ff 0%, #085c8b 100%);
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0099ff', endColorstr='#085c8b', GradientType=0);
      /* IE6-9 */
    }
    
    .page .anim-elem {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 10;
    }
    
    .page .anim-elem .circle {
      display: flex;
      align-items: center;
      position: absolute;
      background: rgba(255, 255, 255, 0.25);
      width: 32px;
      height: 32px;
      border-radius: 100%;
      /* transform: translate(-32px);*/
      margin: -16px -16px
    }
    
    .page .anim-elem .circle:after {
      content: '';
      background: white;
      content: '';
      background: white;
      width: 14px;
      height: 14px;
      border-radius: 100%;
      position: absolute;
      margin: 0 8px;
      left: 0;
      right: 0;
    }
    
    .page .anim-elem .circle.circle-1 {
      top: 100%;
      left: 50%;
    }
    
    .page .anim-elem .circle.circle-2 {
      top: 100%;
      left: 0%;
    }
    
    .page .anim-elem .circle.circle-3 {
      top: 100%;
      left: 100%;
    }
  </style>
</head>

<body>

  <div class="page">


    <div class="anim-elem">
      <div class="circle circle-1"></div>
      <div class="circle circle-2"></div>
      <div class="circle circle-3"></div>
    </div>

  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
    function animations() {


      var time = 500;
      // FIRST CIRCLE
      $(".circle-1").animate({
        left: '0%',
        top: '0%'
      }, time);
      $(".circle-1").animate({
        left: '25%',
        right: '0',
        top: '100%'
      }, time);
      $(".circle-1").animate({
        left: '50%',
        right: '0',
        top: '0'
      }, time);
      $(".circle-1").animate({
        left: '75%',
        right: '0',
        top: '100%'
      }, time);
      $(".circle-1").animate({
        left: '100%',
        right: '0',
        top: '0'
      }, time);
      $(".circle-1").animate({
        left: '50%',
        right: '0',
        top: '100%'
      }, time);
      // SECOND CIRCLE
      $(".circle-2").animate({
        left: '50%',
        right: '0',
        top: '0%'
      }, time);
      $(".circle-2").animate({
        left: '100%',
        right: '0',
        top: '100%'
      }, time);
      $(".circle-2").animate({
        left: '0%',
        right: '0',
        top: '50%'
      }, time);
      $(".circle-2").animate({
        left: '100%',
        right: '0',
        top: '0%'
      }, time);
      $(".circle-2").animate({
        left: '0%',
        right: '0',
        top: '100%'
      }, time);

      // THIRD CIRCLE
      $(".circle-3").animate({
        left: '0%',
        right: '0',
        top: '0%'
      }, time);
      $(".circle-3").animate({
        left: '100%',
        right: '0',
        top: '50%'
      }, time);
      $(".circle-3").animate({
        left: '0%',
        right: '0',
        top: '100%'
      }, time);
      $(".circle-3").animate({
        left: '25%',
        right: '0',
        top: '0%'
      }, time);
      $(".circle-3").animate({
        left: '50%',
        right: '0',
        top: '100%'
      }, time);
      $(".circle-3").animate({
        left: '75%',
        right: '0',
        top: '0'
      }, time);
      $(".circle-3").animate({
        left: '100%',
        right: '0',
        top: '100%'
      }, time);
    }


    $(document).ready(function() {
      animations();
      window.setInterval(animations, 2500);
    });
  </script>
</body>

</html>

＆＃13;

＆＃13;

＆＃13;