Jquery Show / Hide сдвигает элемент вправо, прежде чем показывать или скрывать

Question

$(document).ready(function(){
        var speed = 700;
        var pause = 3500;
            function removeFirst(){
                $('ul#newsfeed li:first').hide('slide', {direction: "up"}, speed, function() {addLast(this);});
            }
            function addLast(first){
                $(first).insertAfter('ul#newsfeed li:last').show();
                $('ul#newsfeed li:first').show("slide", {direction: "down"}, speed);
            }

            interval = setInterval(removeFirst, pause);
    });

Привет, спасибо, что нашли время помочь мне с моей проблемой. Двигаясь дальше ... Это код для новостной ленты, которая берет неупорядоченный список, перемещает первый элемент вниз и скользит рядом с верхом. Я показываю только один элемент списка за раз, используя css. Это прекрасно работает во всех браузерах, кроме наших избранных, IE 6 и IE 7. В этих двух браузерах первый элемент списка сдвигается вправо, а затем исчезает из поля зрения. Затем следующий элемент списка перемещается вверх, уже сдвинутый вправо, и сдвигается влево туда, где он принадлежит, после того, как он перемещается вверх.

Я довольно смущен этой проблемой, и любая помощь приветствуется. Благодарю.

Answer 1

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

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

Я бы проверил CSS. Кроме того, попробуйте проверить, будет ли намного более простая (не стилизованная) версия вашего HTML работать с точно таким же Javascript.

Опять же, извините за отсутствие конкретики - возможно, вы могли бы поделиться некоторым кодом или указать на пример?

Answer 2

Это действительно хороший эффект, чувак;) Ваш код здесь использует направления "Вверх" и "Вниз", но он также хорошо работает с левым / правым, правым / нижним также Я установил для list-style-type значение none, а для list-style-position - снаружи.

list-style-type:none;
list-style-position:none;