3

jQuery プラグイン hoverIntent を使用しています。問題は、ページが読み込まれるときに、マウスが既にオブジェクト '#gallery' の上にあるため、hoverIntent コードがトリガーされないことがあります。

これが私のコードの例です：

$(document).ready(function(){
  $('#gallery').hoverIntent(function(){
    $('.gallery-thumbs').stop().animate({'height': '65px'},400); //in code animating a element child within #gallery
  },function(){
    $('.gallery-thumbs').stop().animate({'height': '33px'}); //out code animating a child element within #gallery
  });
});

誰かがこれに対する解決策を知っていますか?

4

5 に答える 5

0

これはあなたが探しているものですか？

$(document).ready(function(){
    $(document).one("mousemove", function(e) {
        if (mouse pointer is on gallery) {
            $('.gallery-thumbs').stop().animate({'height': '65px'}, 400);
        }
    });

    $('#gallery').hoverIntent(function() {
        $('.gallery-thumbs').stop().animate({'height': '65px'}, 400); //in code animating a element child within #gallery
    },function() {
        $('.gallery-thumbs').stop().animate({'height': '33px'}); //out code animating a child element within #gallery
    });
});
于 2012-06-07T20:20:27.853 に答える
0

そこにあるjsのいくつかのバグが原因で、いくつかの問題があります。

私はすでにすべての大変な仕事をしました。オプションを追加するだけです

私はそれを解決しました。ここからjsを取得できます。そして、slimscroll関数を呼び出すときに、以下のオプションを追加します

マウスオーバー：真

デモとして

jQuery('#scroll').slimScroll({
       height: jQuery(window).height()+'px',
        railVisible: true,
        allowPageScroll: true,
        mouseOver:true
    });

リンクにアクセス/ダウンロードはこちら

于 2015-04-16T09:58:09.087 に答える
0

別の解決策を探している人のために、ここに私のものがあります：

$('myselector').hoverIntent({
  over: myOverfunc,
  out: myOutfunc
});

$('myselector').trigger('mouseenter.hoverIntent');

「mouseenter.hoverIntent」はプラグインによって登録されたイベントであるため、注意してください (r7 でテスト済み)。

于 2013-07-09T08:45:03.207 に答える
0

このライブラリを引き続き使用したい場合に私が提案する解決策は、最初の (および最初の のみone) mousemove イベントをキャッチし、この時点でマウスが #gallery の上にあるかどうかを確認することです。

これを使用して、イベントがオブジェクト上にあるかどうかを確認できます。

var eventIsOver = function(event, o) {
    if ((!o) || o==null) return false;
    var pos = o.offset();
    var ex = event.pageX;
    var ey = event.pageY;
    if (
        ex>=pos.left
        && ex<=pos.left+o.width()
        && ey>=pos.top
        && ey<=pos.top+o.height()
    ) {
        return true;
    }
    return false;
};


$(document).ready(function(){
  $('body').one('mousemove', function(e) {
     if (eventIsOver(e, $('#gallery')) {
         // do what you want to do if the mouse is on the gallery initially
     }
  });
  $('#gallery').hoverIntent(function(){
    $('.gallery-thumbs').stop().animate({'height': '65px'},400); //in code animating a element child within #gallery
  },function(){
    $('.gallery-thumbs').stop().animate({'height': '33px'}); //out code animating a child element within #gallery
  });
});
于 2012-06-07T20:07:58.333 に答える
0

私は完璧な解決策をあきらめ、#gallery 内の子要素で mouseenter をトリガーするように設定しました

$('.gallery-nav').mouseenter(function(){
    $('#gallery').trigger("mouseenter");
});
于 2012-06-07T22:08:52.290 に答える