Javascript/JQuery从div的左右两侧反弹文本

我希望文本在div标记的左右两侧反弹（

#header

）。当它从右侧反弹，然后返回并击中左侧时，效果良好。问题是，当它击中左侧并再次开始向右移动后，它再也不会击中右侧。它只是继续运行，窗口滚动条出现。它一碰到左边就出现了。似乎是div标签

var finishedGoingRight = false;

setInterval(function() {
   slideText();
}, 10);


function slideText(){
   if(!finishedGoingRight){
      $('#header h1').css("right","-=1");
   }else{
      $('#header h1').css("left","-=1");
   }

   if($('#header h1').css("right") == "20px"){
      finishedGoingRight = true;
   }

   if($('#header h1').css("left") == "485px"){
      finishedGoingRight = false;
   }
}

---

希望我能解释清楚：）

调试代码时发现，

$（“#header h1”）.css（“right”）

总是等于“auto”，除非您在某个地方明确设置了它

这项工作：

var finishedGoingRight=false；
setInterval（函数（）{slideText（）；}，10）；
函数slideText（）{
如果（！finishedGoingRight）{
$（'#header h1'）.css（“左”，“+=1”）；
}否则{
$（'#header h1'）.css（“左”，“-=1”）；
}
如果（$（'#页眉h1'）.position（）.left>=$（'#页眉'）.width（）-$（'#页眉h1'）.width（））{
finishedGoingRight=真；
}否则如果（$（'#header h1'）.position（）.left调试代码时发现，
$（'#header h1'）.css（“right”）
始终等于“auto”，除非您在某个地方明确设置了它

这项工作：

var finishedGoingRight=false；
setInterval（函数（）{slideText（）；}，10）；
函数slideText（）{
如果（！finishedGoingRight）{
$（'#header h1'）.css（“左”，“+=1”）；
}否则{
$（'#header h1'）.css（“左”，“-=1”）；
}
如果（$（'#页眉h1'）.position（）.left>=$（'#页眉'）.width（）-$（'#页眉h1'）.width（））{
finishedGoingRight=真；
}else if（$（'#header h1'）.position（）.left以下是我使用动画的解决方案：

JS:

HTML

以下是我使用动画的解决方案：

JS:

HTML

可能有用看起来使用动画会更好使用动画是否有性能差异？可能有用看起来使用动画会更好使用动画是否有性能差异？
var finishedGoingRight = false;
setInterval(function() { slideText(); }, 10);

function slideText() {
    if (!finishedGoingRight) {
        $('#header h1').css("left", "+=1");
    } else {
        $('#header h1').css("left", "-=1");
    }

    if ($('#header h1').position().left >= $('#header').width()-$('#header h1').width()) {
        finishedGoingRight = true;
    } else if ($('#header h1').position().left <= 0) {
        finishedGoingRight = false;
    }
}

var inner = $('#inner'), widthInner = inner.width(), outer = $('#outer'), widthOuter = outer.width();

function animateRight() {
    inner.animate({ left: widthOuter - widthInner }, 1000, function() { 
        animateLeft();    
    });      
}

function animateLeft() {
    inner.animate({ left: 0 }, 1000, function() { 
        animateRight(); 
    });      
}

animateRight();

<div id="outer"><h2 id="inner">Inner</h2></div>

div, h2 { border: 1px solid black; }
#outer { width: 300px; height: 200px; }
#inner { margin-top: 75px; width: 50px; position: relative; }