使用jquery继续从右向左移动框

Question

我想将盒子向左移动，然后再向右移动，但它只能进行一个周期

＆＃13;

＆＃13;

$(document).ready(function() {
  function a() {
    $('#foo').css({
      'right': window.innerWidth - $('#foo').width(),
      'left': 'auto'
    }).animate({
      'right': '0px'
    }, 9000, function() {
      $('#foo').animate({
        'left': '0px'
      }, 9000, a);
    });
  }
  a();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" style="background: red; width: 100px; height: 100px; position: absolute" ></div>

＆＃13;

＆＃13;

＆＃13;

任何帮助??

Answer 1

是的，它没有任何问题。

$(document).ready(function() {
  function a() {
    $('#foo').css({
      'right': window.innerWidth - $('#foo').width(),
      'left': 'auto'
    }).animate({
      'right': '0px'
    }, 9000, function() {
      $('#foo').animate({
        'left': '0px'
      }, 9000, a);
    });
  }
  a();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" style="background: red; width: 100px; height: 100px; position: absolute" ></div>

https://jsfiddle.net/n7u7q42d/

可能你已经加载了多个库。你能发布错误吗？

Answer 2

您的代码已经满足您的要求：

$(document).ready(function() {
  function a() {
    $('#foo').css({
      'right': window.innerWidth - $('#foo').width(),
      'left': 'auto'
    }).animate({
      'right': '0px'
    }, 9000, function() {
      $('#foo').animate({
        'left': '0px'
      }, 9000, a);
    });
  }
  a();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" style="background: red; width: 100px; height: 100px; position: absolute" ></div>

但是，如果您使用 CSS animations ，您也可以以更好的效果完成同样的事情：

#foo { 
  background: red; 
  width: 100px; 
  height: 100px; 
  position: absolute; 
  left:0px;  /* This is the property that will be animated */
  animation:9s leftRight infinite;  /* configure the animation */
}

@keyframes leftRight {

  0% {
    left:0;
  }
  
  50% {
    left:calc(100% - 100px);
  }
  
  100% {
    left:0;
  }
}

<div id="foo"></div>