1

私は超初心者です (先週、codeAcademy で html、css、jQuery を学びました) ので、これはばかげた質問かもしれません。ただし、次の例でカーソルをブロック上ですばやくドラッグすると、アニメーションが固定されているように見えます。つまり、ブロックは不透明なままです。皆さん、私を助けてくれませんか? 私のコードは以下にリンクされています。前もって感謝します。

http://jsfiddle.net/ivanjsfiddle00/eFShc/1/

$(document).ready(function() {
$(".button").hover(function() {
    $(this).filter(':not(:animated)').animate({"opacity": 1 }) 
}, function() {
    $(this).filter(':not(:animated)').animate({"opacity": 0.5 })
});
});

編集： ありがとうございました。filter(':not(:animated)') を stop(true) に置き換えるとうまくいきました。

4

3 に答える 3

0

stop()イベント間のアニメーション キューをクリアするには、を使用する必要があります。これにより、filter(':not(:animated)')冗長になります。

$(".button").hover(function () {
    $(this).stop(true).animate({
        "opacity": 1
    })
}, function () {
    $(this).stop(true).animate({
        "opacity": 0.5
    })
});

フィドルの例

于 2013-10-14T15:12:36.763 に答える
0

:hover@Rory は元の質問に答えたようですが、CSS を使用して疑似要素を使用するという別のオプションがあることを指摘する価値があります。

.button {
    float: left;
    margin: 1px;
    opacity: 0.5;
    display: inline-block;
    background-color: #757575;
    width: 50px;
    height: 50px;
}

.button:hover{
    background-color:#323a44;
}
于 2013-10-14T15:15:08.750 に答える