Question

这可能是一般的算法问题，而不是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();
    });
});

Jsfiddle example

Answer 1

您可以通过以下方式根据元素的宽度设置动画持续时间：

    // ... 

    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')
    }

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

1 个答案: