0

I'm wondering if someone could help. I'm trying to create a horizontal scroller activated by mouse, which enlarges div on hover. But can't get it working.

I have created an example here: http://vonholmes.co.uk/scroller/scroll-test.html

However, the 6th element in the list doesn't display at all & the 5th goes erratic on hover!

Does anyone know of a better way of doing this or some way to fix my code?

Have also tried using: http://www.smoothdivscroll.com/index.html#quickdemo - but enlarging on hover also causes this to break.

Any help is greatly appreciated!

vonholmes
  • 61
  • 1
  • 9

1 Answers1

1

I have made a small change in your jquery animate function and now it is working fine for me. Issue was with the width allocated to li tag.

$("ul li").hover(
function(){ 
$("ul li").animate({'width':'100px'},'fast');   
    $(this).animate({'width' : '250px'},'fast');
},
function()
{
    $(this).animate({'width':'130px'},'fast');
});
});
ssilas777
  • 9,672
  • 4
  • 45
  • 68
  • Thanks for the reply! This does make it function correctly, but is there a way of keeping the width at 130px, and only enlarging it? This method resizes everything to 100px, apart from the current one. – vonholmes Jul 26 '12 at 13:13
  • In that case i would suggest you a work around - i removed the additional jquery line i added previously and added two more li with visibility as hidden, for my surprise it is working like a charm.
  • – ssilas777 Jul 26 '12 at 13:41