5 
    function hoverOpacity() {
    $('#fruit').mouseover(function() {
        $(this).animate({opacity: 0.5}, 1500);
      });
    $('#fruit').mouseout(function() {
        $(this).animate({opacity: 1}, 1500);
      });
}

これはアニメーション化する私の関数であり、機能しdiv#fruitます。

問題はこれです。アニメーションが終了するmouseout前に、をmousein開始する前にアニメーションを完了する必要がありmouseoutます。（それが理にかなっていることを願っています）

これは通常は目立ちませんが、持続時間が長いと目立ちます。

アニメーションを終了するのではなく、アニメーションを停止して元の状態に戻してほしい。

4

4 に答える 4

6

stop関数を探しており、その後に続く可能性がありますshow(またはhide、またはcssは、最終的にどの状態になりたいかによって異なりますopacity)。

function hoverOpacity() {
    $('#fruit').mouseover(function() {
        $(this).stop(true).animate({opacity: 0.5}, 1500);
      });
    $('#fruit').mouseout(function() {
        $(this).stop(true).animate({opacity: 1}, 1500);
      });
}

はtrue、アニメーションに最後までジャンプするように指示します。これが要素の唯一のアニメーションである場合は、問題ありません。cssそうでなければ、私が言ったように、目的の不透明度を明示的に設定するために見ることができます。

ただし、これとは別に、mouseenterandmouseleaveではなくmouseoverandを使用することを検討することもできますmouseout。その理由は次の 2 つです。1.mouseoverマウスが要素上を移動すると繰り返されます。2. 両方mouseoverとmouseout bubbleであるため、"fruit" 要素に子要素がある場合、それらからもイベントを受け取るため、この種のアニメーションが不安定になる傾向があります。

于 2011-05-18T10:57:19.877 に答える
2

.stop()現在のアニメーションとキューに入っているアニメーションをクリアするには、アニメーション化する前に呼び出しを追加する必要があります。

function hoverOpacity() {
    $('#fruit').mouseover(function() {
        $(this).stop(true).animate({opacity: 0.5}, 1500);
      });
    $('#fruit').mouseout(function() {
        $(this).stop(true).animate({opacity: 1}, 1500);
      });
}
于 2011-05-18T10:57:02.450 に答える
1

これを試して：

function hoverOpacity() {
    $('#fruit').mouseover(function() {
        $(this).stop(true, true).animate({opacity: 0.5}, 1500);
      });
    $('#fruit').mouseout(function() {
        $(this).stop(true, true).animate({opacity: 1}, 1500);
      });
}

これにより、アニメーションが停止し、キューがクリアされ (最初の引数)、最後にジャンプします (2 番目の引数)。必要に応じて、引数を変更したりいじったりすることができます。

于 2011-05-18T10:56:43.727 に答える
0

これも試してください：

function hoverOpacity() {
    $('#fruit').hover(function() {
        $(this).animate({opacity: 0.5}, 1500);
    }, function() {
        $(this).animate({opacity: 1}, 1500);
    });
}
于 2011-05-18T10:58:00.697 に答える