3

スペシャリストの皆様

質問があります。私はJqueryが初めてで、以下のコード例に従ってdivアニメーションを利用しようとしています。何が起こるかというと、マウスを div の上に短時間何度もホバリングしている間に、アクションがそれ自体を再現し、どうにかして回避したいユーザビリティ動作を引き起こします。望ましくない複数のアクティベーションを避けるために、特定の時間内に div がホバリングするなど、マウスの動作を関数でチェックする方法はありますか? 十分に説明したことを願っています。

ご意見ありがとうございます。

$(document).ready(function() {

$("#expand_smoke").hover(
         //on mouseover
          function() {
              $(this).animate({
              height: '+=125' //adds 125px
               }, 'slow' //sets animation speed to slow
              );
           },
         //on mouseout
          function() {
              $(this).stop()
             $(this).animate({
             height: '60' //changes back to 60px
        }, 'slow'
      );
    }
  );

});
4

3 に答える 3

5

なぜあなたはこれをしないのですか？

$("#expand_smoke").hover(
    function() {
        $(this).stop().animate({ height: '200' }, 'slow');
    },
    function() {
        $(this).stop().animate({ height: '60' }, 'slow');
    }
);
于 2012-10-02T21:49:52.633 に答える
2

私が正しく理解している場合、これは機能するはずです。ホバー時にタイムアウトが開始され、マウスアウト時にキャンセルされるため、少なくとも 500 ミリ秒ホバーした場合にのみアニメーションが開始されます。

var timeout = null;
$("#expand_smoke").hover(
    //on mouseover
    function() {
        timeout = setTimeout(function(){
            $(this).animate({height: '+=125'}, 'slow');
        },500);
    },
    //on mouseout
    function() {
        clearTimeout(timeout);
        $(this).stop().animate({height: '60'}, 'slow'
    );
});
于 2012-10-02T21:53:12.757 に答える
1

私のプロジェクトの1つにも同じものが必要でした。私にとって非常にうまく機能した、 hoverIntentプラグインをお勧めします。試してみてください。

于 2012-10-02T21:46:02.200 に答える