jQuery & CSS Issue - Animate

Question

I am having an issue with some jQuery/CSS that I am using (Not sure which one it is), but here is what's going on:

1. The user can hover over an 'li' element and an options bar will slide in from the right, and on hover out it will slide bar to the right: http://uploadir.com/u/vx447j

2. The li elements can also overflow the box they are in on the Y-axis, for which I have implemented a Navigation system for: http://uploadir.com/u/20l4bh

When you click down, it works perfectly, until you hover over one of the elements. It brings the whole thing back to it's original position, eg: Clicked down ( http://uploadir.com/u/36x049 ), then hover over an element ( http://uploadir.com/u/r9047d )

As you can see by the above images, it resets and then doesn't allow me to click down again. The jQuery I am using is:

$('#chat_sidebar ul li').hover(
function() {
    id = $(this).attr('rel');
    $('#chat_sidebar_options_'+id).stop().animate({right: 0}, 'fast');
}, function() {
    id = $(this).attr('rel');
    $('#chat_sidebar_options_'+id).stop().animate({right: -60}, 'fast');
});
$('#down').click(function() {
    new_current = current + 29;
    current = new_current;
    $('#chat_sidebar').scrollTop(current);
    current2 = $('#chat_sidebar').scrollTop();
});

The CSS for the li elements:

#chat_sidebar ul li {
    width: 188px;
    height: 21px;
    background: #2f2f2f;
    font-weight: bold;
    text-shadow: 0px -1px 0px #000000;
    filter: dropshadow(color=#000000, offx=0, offy=-1);
    background: -moz-linear-gradient(top,  #2f2f2f 0%, #202020 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2f2f2f), color-stop(100%,#202020));
    background: -webkit-linear-gradient(top,  #2f2f2f 0%,#202020 100%);
    background: -o-linear-gradient(top,  #2f2f2f 0%,#202020 100%);
    background: -ms-linear-gradient(top,  #2f2f2f 0%,#202020 100%);
    background: linear-gradient(top,  #2f2f2f 0%,#202020 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f2f2f', endColorstr='#202020',GradientType=0 );
    border: thin solid #000000;
    margin-top: -1px;
    padding-top: 7px;
    padding-left: 5px;
    -webkit-box-shadow: inset 0px 1px 0px 0px #696969;
    -moz-box-shadow: inset 0px 1px 0px 0px #696969;
    box-shadow: inset 0px 1px 0px 0px #696969;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    -moz-border-radius-bottomright: 2px;
    -moz-border-radius-bottomleft: 2px;
    -webkit-border-radius: 2px 2px 2px 2px;
    border-radius: 2px 2px 2px 2px;
    position: relative;
    cursor: pointer;
    float: left;
}

Then the sliding in options area:

.sidebar_options {
    position: absolute;
    right: -60px;
    float: right;
    width: 55px;
    height: 23px;
    background-color: #131212;
    border: thin solid #000000;
    border-right: 0px;
    border-left: 0px;
    -webkit-box-shadow: inset 0px 0px 5px 0px #000000;
    -moz-box-shadow: inset 0px 0px 5px 0px #000000;
    box-shadow: inset 0px 0px 5px 0px #000000;
    padding-left: 5px;
    padding-top: 5px;
    z-index: 100;
    top: -1px;
    cursor: default;
}

Any help is appreciated, if you require anything else that would help you, please comment!

Thanks.

Answer 1

so to be clear when you click the drop down the hover function should no longer be applied. If that is the case what I would do is toggle a class on the ul

$('#down').click(function() {
    new_current = current + 29;
    current = new_current;
    $('#chat_sidebar').scrollTop(current);
    current2 = $('#chat_sidebar').scrollTop();
    $("#chat_sidebar ul").removeClass("notSelected").addClass("selected");
});

$('#chat_sidebar ul.notSelected li').hover(
function() {
    id = $(this).attr('rel');
    $('#chat_sidebar_options_'+id).stop().animate({right: 0}, 'fast');
}, function() {
    id = $(this).attr('rel');
    $('#chat_sidebar_options_'+id).stop().animate({right: -60}, 'fast');
});

if you set the notSelected class on the ul by default then anytime you hover over the ul it will show the hover animation, and if you click the down button then the hover animiation will stop. which would also mean that you need to do something like this

$('#up').click(function() {
    $("#chat_sidebar ul").removeClass("selected").addClass("notSelected");
});

EDIT

sidebar_options:hover{
 /* Set your on hover styling here */
}