这可能更像是一个通用算法问题,而不是 jquery 问题。
我的站点通过 API 提取数据以在首页的 div 中显示信息。我正在使用 js/jquery 脚本将 css 动画应用于溢出超过其容器宽度的文本。我有一个 css 类,如果存在溢出则应用该类,并且该类设置了动画属性。
我的问题是有些文本比其他文本溢出得更多,所以我正在寻找一种方法来使动画时间根据溢出量而变化。这样文本只会滚动到行尾,然后重置。
这里是代码,以防我缺少一个 jquery 解决方案。
jQuery(function($) {
$('span.beer-info').each(function(i) {
var element = $(this)
.clone()
.css({display: 'inline', width: 'auto', visibility: 'hidden'})
.appendTo('body');
if( element.width() > $(this).width() ) {
$(this).addClass( "mover-1" );
}
element.remove();
});
});
最佳答案
您可以通过这种方式根据元素的宽度设置动画持续时间:
// ...
if( element.width() > $(this).width() ) {
$(this).addClass( "mover-1" );
// This is an example calculation, you can find a formula that works for you
$(this).css('animation-duration', ($(this).width() / element.width() * 4) + 's')
}
关于jquery - 根据溢出宽度确定动画时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54313631/