Определить время анимации на основе ширины переполнения

Question

Это может быть больше общей проблемой алгоритма, чем проблемой 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();
    });
});

Пример Jsfiddle

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