javascript - 为什么我的文字没有左右跳动

JSFiddle有效，但是当我将其放入index.html时将不起作用。我认为这是<span>标记。我可以使用其他标签吗？

$(document).ready(function(){
    var counter = 0,
        $chars  = $(".arthed").children();

    setInterval(function () {
        $chars.eq(counter).effect( "bounce", {times:1}, 500 );
        counter++;
        if (counter >= $chars.length) {
            counter = 0;
        }
    }, 250);
});

.arthed {
    font-family: montserrat;
}
.ui-effects-wrapper {
    display : inline-block;
    font-family: montserrat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div class="arthed"><span>s</span><span>o</span><span>m</span><span>e</span> <span>t</span><span>e</span><span>x</span><span>t</span></div>

最佳答案

这应该是与字体和文本呈现有关的一些问题（甚至也是）。您的代码段从左到右跳动，将字体更改为sans后，至少在我的设备上，停止了水平跳动。

$(document).ready(function() {
  var counter = 0,
    $chars = $(".arthed").children();
  setInterval(function() {
    $chars.eq(counter).effect("bounce", {
      times: 1
    }, 500);
    counter++;
    if (counter >= $chars.length) {
      counter = 0;
    }
  }, 250);
});

.arthed {
  font-family: sans;
}

.ui-effects-wrapper {
  display: inline-block;
  font-family: sans;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>

<div class="arthed">
  <span>s</span>
  <span>o</span>
  <span>m</span>
  <span>e</span>
  <span>t</span>
  <span>e</span>
  <span>x</span>
  <span>t</span>
</div>

因此，防止其左右跳动的唯一方法可能是在保存动画之前跨度的宽度并固定该宽度。此代码段是肮脏的工作示例。使用position: absolute

$(document).ready(function() {
  var counter = 0,
    $chars = $(".arthed").children();
  $chars.each((i,el) => {el.style.left=el.offsetLeft+"px"});
  $chars.each((i,el) => {el.style.position="absolute"})
  setInterval(function() {
    $chars.eq(counter).effect("bounce", {
      times: 1
    }, 500);
    counter++;
    if (counter >= $chars.length) {
      counter = 0;
    }
  }, 250);
});

.arthed {
  font-family: montserrat;
  position: absolute;
}

.ui-effects-wrapper {
  display: inline-block;
  font-family: montserrat;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>

<div class="arthed">
<span>s</span><span>o</span><span>m</span><span>e</span>
<span>t</span><span>e</span><span>x</span><span>t</span>
</div>

关于javascript - 为什么我的文字没有左右跳动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45911463/