Jquery Show/Hide shifts element to the right before showing or hiding

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

Hi, thanks so much for taking your time to help with my issue. Moving on… This is code for a news ticker which takes an unordered list and moves the first element to the bottom and slides the next to the top. I only show one list element at a time using css. This works fine in every browser except our favorites, IE 6 and IE 7. In those two browsers, the first list item shifts to the right, then slides out of sight. Then, the next list item slides up already shifted to the right, and shifts to the left to where it belongs after it slides up.

I'm fairly confused about this problem and any help is appreciated. Thanks.

Answer 1

Sorry if my answer seems a little under-developed, but perhaps I can give you a couple ideas.

It seems that a likely problem is the slide animation is not accounting for the box model you are using. This might mean that the slide is trying to position the LI element but some padding, margin, or border outside of the LI is making the offset calculations wrong.

I would check the CSS. Also, try to test if a much simpler (unstyled) version of your HTML will work with the exact same Javascript.

Again, sorry for the lack of specificity - perhaps you could share some code, or point to an example?

Answer 2

It is really nice effect dude ;) your code here uses direction "Up" and "Down" but it also works nice with left/right, right/down also. I set the list-style-type to none and list-style-position to outside.

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