为什么我的文本没有从左到右弹跳

Question

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>

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>