0

我正在使用一些 jQuery 来创建渐变翻转效果，但是在执行单击和拖动后我遇到了按钮的行为问题。

<div id="splash_buttons">
    <a id="our_projects_button" href="#work">
        Our Projects
        <div class="normal"></div>
        <div class="hover"></div>
    </a>
</div>

有两个不同的 div 淡入淡出来创建悬停淡入淡出。效果非常好，除非当您再次单击、拖动、释放、鼠标输入然后鼠标离开时，悬停状态不会消失。单击时，将显示活动状态。它将在拖动期间保持不变，直到释放鼠标按钮。然后它将恢复到悬停状态并最终淡入正常状态。之后，如果您将鼠标悬停在按钮上，它将按预期激活悬停状态，但在离开按钮时不会停止悬停状态，除非您再次上下单击按钮。

$('#splash_buttons a, #work_buttons a').live('mouseenter', function() {
            $(this).find('.hover').fadeIn(hoverFadeTime);
}).live('mouseleave', function() {
            if(!isMouseDown) {
                $(this).find('.hover').stop().fadeOut(hoverFadeTime);
            }
}).live('mousedown',function() {
            isMouseDown = true;
            $(this).find('.normal').hide();
}).live('mouseup', function() {
            isMouseDown = false;
            $(this).find('.normal').show();
            $(this).find('.hover').stop().fadeOut(hoverFadeTime);
}).on('dragend', function() {
            $(this).find('.normal').show();
            $(this).find('.hover').stop().fadeOut(hoverFadeTime);
});

我不确定这是否与正常和悬停状态由 jQuery 处理而活动状态只是一个 css 规则这一事实有关。有人能帮忙吗？谢谢！

#our_projects_button {
    float: left;
    position: relative;
    left: -6px;
    width: 173px;
    height: 53px;
    margin: 0 20px 0 0;
    text-indent: -9999px;
}

#our_projects_button .normal {
    position: absolute;
    top: 0;
    left: 0;
    width: 173px;
    height: 53px;
    background: url('img/our_projects_sprite.png') transparent 0 0 no-repeat;
}

#our_projects_button .hover {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 173px;
    height: 53px;
    background: url('img/our_projects_sprite.png') transparent 0 -53px no-repeat;
}

#our_projects_button .hover:active { background-position: 0 -106px; }
4

1 回答 1

1

如果您将 dragend 代码更改为

.on('dragend', function() {
   $(this).find('.normal').show();
   $(this).find('.hover').stop().fadeOut(hoverFadeTime);
   isMouseDown = false;
});
于 2012-11-09T21:27:30.753 回答