5

私はこのように見えるいくつかのhtmlを持っています：

<a href="#" class="move"><span class="text">add</span><span class="icon-arrow"></span></a>

そして、アンカータグに登録されたjqueryイベントがあります：

$('a.move').hover(
    function (event) {
        $(this).children('span.text').toggle();
        $(this).animate({right: '5px'}, 'fast');
    },
    function (event) {
        $(this).children('span.text').toggle();
        $(this).animate({right: '0px'}, 'fast');
    }
);

アンカータグの上にマウスを置くと、span.textが表示され、アンカーが5px右に移動します。

さて、私は入りたくない複雑さのために、私は位置を設定しなければなりません：相対的; コンテナ上にアイコンとテキストを絶対に配置して、アイコンが左側に表示され、テキストが右側に表示されるようにします。

問題：

アンカータグの上にマウスを置くと、アイコンが右に移動し、マウスがテキスト（表示される）の上に移動します。残念ながら、マウスをアイコンからテキストに移動すると、「out」関数が呼び出され、アニメーションが狂ったようにループし始めます。マウスがアンカータグを離れることがないため、「out」イベントが発生する原因がわかりません。

ありがとう！

4

1 に答える 1

13

ホバーの代わりに、「mouseenter」および「mouseleave」イベントを使用できます。これらは、子要素が邪魔になったときに発生しません。

$('a.move').bind('mouseenter', function (e) {
  $(this).children('span.text').toggle();
  $(this).animate({right: '5px'}, 'fast');
})
.bind('mouseleave', function (e) {
  $(this).children('span.text').toggle();
  $(this).animate({right: '0px'}, 'fast');
});
于 2009-04-08T04:51:15.437 に答える