Jquery 根据溢出宽度确定动画时间

Jquery 根据溢出宽度确定动画时间,jquery,css,algorithm,animation,Jquery,Css,Algorithm,Animation,这可能更像是一个通用算法问题,而不是jquery问题 我的网站正在通过一个API获取数据,以divs的形式在首页显示信息。我使用js/jquery脚本将css动画应用于溢出超过其容器宽度的文本。我有一个css类,如果存在溢出,它将被应用,并且该类设置了动画属性 我的问题是一些文本溢出比其他文本多,因此我正在寻找一种方法,根据溢出量使动画时间可变。这样,文本只会滚动到行尾,然后重置 这是我缺少的jquery解决方案的代码 jQuery(function($) { $('span.beer-

这可能更像是一个通用算法问题,而不是jquery问题

我的网站正在通过一个API获取数据,以divs的形式在首页显示信息。我使用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')
    }

太完美了!谢谢。