Question

我正在尝试使用jQuery慢慢显示文本，类似于this question;事情是我主要关注答案的jsfiddle，虽然动画肯定有效，但是在动画完成后文本会弹回来并且它不是完全平滑的 - 只要文本不够长，它就是' ll animate，否则它会对动画的一半进行动画处理，然后突然跳转以完全显示文本

要查看最后一期，请删除fiddle中的第二个动画功能，以便文本永远不会动画回零宽度。

我正在制作抽屉式菜单，它可以滑动（但不完全 - 我不能只隐藏整个抽屉），所以我只想让文字用菜单滑动

这是fiddle，简短的例子：

HTML

<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无关。

我也使用棱角分明;有点新鲜，所以不知道它是否对你有任何帮助。

Answer 1

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

看起来你正在获得所有div的第一个跨度的宽度。我会遍历每个宽度的跨度，并为每个div设置动画宽度。

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

$(this).parent().animate({
width: "0"
}, 3000);

}）;

Answer 2

设置id你的span元素

像

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

Fiddle

Answer 3

Demo检查一下，更改持续时间。

 $('.item-name').animate({width: itemNameWidth}, 5000);

在列表中慢慢地动画文本

3 个答案: