Question

JSFiddle 有效，但当我将其放入我的index.html时，它无法正常工作。我认为它是<span>标签。我可以使用不同的标签吗？

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

它应该是与字体和文本呈现相关的一些问题（甚至也是如此）。您的代码段从左向右反弹，将字体更改为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>

为什么我的文字从左到右弹跳

1 个答案: