0

我有一个使用 HTML 标记创建的简单按钮，该按钮在单击时视觉上按下并将用户发送到某个页面。当它被正常点击时，我可以让它工作，但是当用户取消点击鼠标或将鼠标从按钮上移开时，我希望按钮“释放”（返回到原始状态）。我已经查看了其他建议，但还没有找到一个可以按照我想要的方式工作的建议。下面是我目前正在使用的代码（我知道在当前的 JQuery 代码中，当用户离开时，'mouseup' 函数不会触发；我只是没有找到合适的替代品，所以我恢复了工作最初）。我愿意使用 JQuery 以外的东西；起初这似乎是最好的。

HTML：

<div class="letter_buttons" onclick="window.location='index.php'">Active</div>

CSS：

    .letter_buttons {
        display: inline-block;
        height: 30px;
        width: 140px;
        background-color: #b2b2b2;
        border: 3px solid #2D2D2D;
        color: #2D2D2D;
        box-shadow: 2px 2px 2px #888;
        position: relative;
        left: 0;
        top: 0;
    }

查询：

$(document).ready(function() {
    $('.letter_buttons').mousedown(function() {
        $(this).css('box-shadow', '0px 0px 0px #888');
        $(this).animate({left: '+=1px'}, 0);
        $(this).animate({top: '+=1px'}, 0);
    });
    $('.letter_buttons').mouseup(function() {
        $(this).css('box-shadow', '2px 2px 2px #888');
        $(this).animate({left: '-=1px'}, 0);
        $(this).animate({top: '-=1px'}, 0);
    });
});
4

2 回答 2

1

我看不出有任何理由为此使用 javascript。这一切都可以通过一些 CSS 规则来完成。（jsfiddle）

HTML：

<a class="letter_buttons" href="#">Active</a>

CSS：

.letter_buttons {
    display: inline-block;
    height: 30px;
    width: 140px;
    background-color: #b2b2b2;
    border: 3px solid #2D2D2D;
    color: #2D2D2D;
    box-shadow: 2px 2px 2px #888;
    position: relative;
    left: 0;
    top: 0;
}

.letter_buttons:active {
    box-shadow: 0 0 0 #888;
    left: 1px;
    top: 1px;
    transition: all 0.2s;
}
于 2013-10-29T20:54:25.693 回答
0

看来您正在使用 CSS3，因为您正在应用 box-shadow。

出于这个原因，我会放弃使用 jQuery 制作动画并使用 CSS3。它会更容易维护。

$('.letter_buttons').mousedown(function() {
    $(this).addClass('active');
}).mouseup(function() {
    $(this).removeClass('active');
});

CSS - 将此添加到您的 .letter_buttons 类

div.letter_buttons {
    /* CSS3 transitions */

    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out;
}

添加这个：

div.letter_buttons.active {
    left: 1px;
    top: 1px;
    box-shadow: 0px 0px 0px #888;
}
于 2013-10-29T21:03:25.267 回答