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>

ホバーフェードを作成するためにフェードインおよびフェードアウトする2つの異なるdivがあります。クリック、ドラッグ、リリース、mouseenter、そしてもう一度mouseleaveを押すと、ホバー状態が消えないことを除いて、この効果は非常にうまく機能します。クリックすると、アクティブな状態が表示されます。マウスボタンを離すまで、ドラッグ中はそのままになります。その後、ホバー状態に戻り、最終的に通常の状態にフェードバックします。その後、ボタンにカーソルを合わせると、期待どおりにホバー状態がアクティブになりますが、ボタンをもう一度上下にクリックしない限り、ボタンから離れるときにホバー状態が停止することはありません。

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

ドラッグエンドコードを次のように変更するとどうなりますか

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