Search code examples
jqueryhoverscroller

Horizontal div scroller with enlarge on hover

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!

Solution

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