Question

我正在使用一些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; }

Answer 1

如果您将dragend代码更改为

，该怎么办？

.on('dragend', function() {
   $(this).find('.normal').show();
   $(this).find('.hover').stop().fadeOut(hoverFadeTime);
   isMouseDown = false;
});

在jQuery中拖动后，mouseleave handler停止工作

1 个答案: