使用 jQuery 从右向左连续移动框

Question

我想连续地向右移动框，然后向左移动，然后再向左移动，但它只做了一个循环

$(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>

任何帮助？？

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 动画，您也可以以更好的性能完成相同的事情：

#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>