动画文本慢慢地在列表中

Animate Text Slowly Inside List

本文关键字：列表 文本 慢慢 动画      更新时间：2023-09-26

我正在尝试使用jQuery缓慢显示文本，有点像这个问题;问题是我主要是遵循答案的jsfiddle，虽然动画肯定是工作的，但文本只是在动画完成后弹出，它不是完全平滑的-只要文本不够长，它就会动画，否则它会在动画的一半，然后突然跳转到显示整个文本

要查看这最后一个问题，请删除小提琴中的第二个动画函数，以便文本永远不会动画回到零宽度。

我正在制作一个抽屉类型的菜单，它是可滑动的(但不是完全-我不能隐藏整个抽屉)，所以我只想让文本滑动与菜单。

这里是小提琴和简短的例子:

<ul class="drawer">
    <li class="drawer-item">
        <div class="item-name">
            <span>Feed</span>
        </div>
    </li>
</ul>
jQuery

var itemNameWidth = $('.item-name span').width();
$('.item-name').animate({
   width: itemNameWidth
 }, 3000);

我做错了什么?还有，有没有更好的方法?我很感激任何类型的建议，即使它与js无关。

我也用angular;有点新，不知道能不能帮上忙。

set id your span elements

<ul class="drawer">
<li class="drawer-item">
    <div class="item-name">
        <span id="id1" >Feed</span>
    </div>
</li>
<li class="drawer-item">
    <div class="item-name">
        <span id="id2" >Videos And More</span>
    </div>
</li>
<li class="drawer-item">
    <div class="item-name">
        <span id="id3" >Map and More Maps</span>
    </div>
</li>
<li class="drawer-item">
    <div class="item-name">
        <span id="id4" >Alerts</span>
    </div>
</li>

，然后是像

这样的脚本
var spanWidth = $('#text span').width();
var itemNameWidth=0;
for(i=1;i<=$('.item-name').length;i++)
{
if(itemNameWidth<$('#id'+i).width())
{
itemNameWidth = $('#id'+i).width();
 }
}
$('.item-name').animate({
width: itemNameWidth
}, 3000);
$('.item-name').animate({
width: "0"
}, 3000);

小提琴

在.item-name CSS中添加:overflow:hidden;

看起来你得到的是所有div的第一个span的宽度。我将循环遍历每个宽度的span，并为每个div设置动画宽度。

$('.item-name span').each(function(){
var itemNameWidth = $(this).width();
$(this).parent().animate({
    width: itemNameWidth
}, 3000);
$(this).parent().animate({
width: "0"
}, 3000);

});

Demo检查这个，更改持续时间

 $('.item-name').animate({width: itemNameWidth}, 5000);
相关文章：