jQuery和CSS問題 - 動畫

Question

我有一些jQuery的/ CSS，我使用（不知道它是哪一個）的問題，但這裏是發生了什麼事情：

1. 用戶可以將鼠標懸停通過一個「禮」元件和選項欄會從右側和懸停 滑出它將條滑動到 右：http://uploadir.com/u/vx447j

2. 的li元素也可以溢出它們在上框Y軸， 爲此我已經實現了一個導航系統： http://uploadir.com/u/20l4bh

當你點擊了，它完美的作品，直到你將鼠標懸停在要素之一。它帶來了整個事情回到它原來的位置，例如：被點擊的下降（http://uploadir.com/u/36x049），然後一個元素（http://uploadir.com/u/r9047d）

懸停你可以通過上面的圖片看，它重置再不允許我再次點擊。我使用的jQuery是：

$('#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(); 
}); 

爲li元素的CSS：

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

然後滑動在選項區域：

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

任何幫助表示讚賞，如果您需要任何可以幫助你的東西，請評論！

謝謝。

Answer 1

所以要清楚，當你點擊下拉式懸停功能時不應該再應用。如果這是我會做的情況下切換的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'); 
}); 

一類，如果你的默認設置。在UL上notSelected類，那麼任何時候你將鼠標懸停在UL，它會顯示懸停動畫，如果你點擊向下按鈕，懸停分析將停止。這也意味着，你需要做這樣的事情

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

編輯

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