javascript - jQuery 和 CSS 问题 - 动画

Question

我在使用某些 jQuery/CSS 时遇到问题(不确定是哪一个)，但这是发生了什么:

1. 用户可以将鼠标悬停在“li”元素上，然后会出现一个选项栏 从右边滑入，悬停时它会滑动条到 右: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 */
}