Получить высоту LI, используя jQuery, поэтому новостная лента прокручивает точное количество, необходимое

Question

Я использую скрипт из http://www.yourinspirationweb.com/en/jquery-how-to-create-a-news-ticker-with-just-a-few-javascript-lines/

Это отличный новостной стикер, предназначенный для прокрутки только одной статьи за раз, а затем добавления его в конце в непрерывном цикле. Но ограничением этого сценария является то, что новости в каждом

должны быть той же высоты, что и друг друга, что не всегда возможно.

Я пытался изменить скрипт так, чтобы он автоматически получал внешнюю высоту '#ticker li:first'. и прокрутите его так, чтобы marginTop равнялся отрицательному значению внешней высоты. вместо значения по умолчанию -120px. Но я понял, что он написан в стиле CSS, я не знаю, как его переписать. Помогите!

вот оригинальный скрипт:

$(function()
{
    var ticker = function()
    {
        setTimeout(function(){
            $('#ticker li:first').animate( {marginTop: '-120px'}, 800, function()
            {
                $(this).detach().appendTo('ul#ticker').removeAttr('style'); 
            });
            ticker();
        }, 4000);
    };
    ticker();
}); 

Answer 1

Это должно сделать свое дело. Просто поместите высоту в переменную, умножьте на -1 (чтобы получить нужное отрицательное число), а затем поместите ее в marginTop имущество:

$(function() {
    var ticker = function() {
        setTimeout(function() {
            // get the height of the li element, multiply by -1 to be negative
            var h = parseInt($("#ticker li:first").outerHeight()) * -1; 
            $('#ticker li:first').animate( {marginTop: h + 'px'}, 800, function() {
                $(this).detach().appendTo('ul#ticker').removeAttr('style'); 
            });
            ticker();
        }, 4000);
    };
    ticker();
});

Answer 2

Чтобы получить externalHeight (включая border, padding и, возможно, margin) элемента html, используя jQuery, выполните $(element).outerHeight()

Чтобы получить innerHeight html-элемента с помощью jQuery, выполните $(element).innerHeight()

$(function()
{
    var ticker = function()
    {
        setTimeout(function(){
            var oHeight = $('#ticker li:first').outerHeight();
            $('#ticker li:first').animate( {marginTop: -oHeight}, 800, function()
            {
                $(this).detach().appendTo('ul#ticker').removeAttr('style'); 
            });
            ticker();
        }, 4000);
    };
    ticker();
});

Единицей по умолчанию являются пиксели, поэтому вам не нужно беспокоиться о добавлении px к значению.