2

私はこれが次の複製のように見えることを知っています: jquery hover() mouseOut イベントは、マウスがリンク上をすばやく移動されたときに発生しませんが、私にとっては機能しません。私は JavaScript や jquery の知識のない PHP プログラマーです。今、私は非常に単純なアイコン アニメーションを作成しようとしています。とてもシンプルです。上記のリンクのように、マウス ポインターが外に出たときにフェードアウト効果を発生させるコールバック関数を作成しますが、マウスを少し上に移動すると、イベントが何度も何度も発生します。私は自分自身を明確にすることを願っています（初心者の英語話者）。これまでのコードは次のとおりです。

<img src="<?= base_url(); ?>img/face1.jpg" id="icon"> //<-- this function is from codeigniter, to get the base url

および jQuery 関数 (別のファイル内):

$(document).ready(function(){
$("#icon").mouseover(function() {
    $(this).fadeOut(1000);
}).mouseout(function(){
    $(this).fadeIn(1000);
});});

ありがとう！！

4

1 に答える 1

2

.mouseenter()を使用する方が良いと思います。

その場合、1 つのイベントだけが取得されますが、マウスオーバーでは多くのイベントが取得されます。したがって、コードは次のようになります。

$(document).ready(function() {
    $("#icon").mouseenter(function() {
        $(this).fadeOut(1000);
    }).mouseout(function() {
        $(this).fadeIn(1000);
    });
});

CSSだけでこれを行うこともできます：

#icon {
    transition: opacity 1s;
}
#icon:hover {
    opacity:0;
}
<img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png?v=fde65a5a78c6" id="icon" alt="" />

于 2013-07-29T22:23:17.450 に答える