要素(例:div class = "myiv")がホバーされた後に実行される関数があるかどうか疑問に思い、ホバーされているかどうかをXミリ秒ごとに確認し、ホバーされている場合は別の関数を実行します。
編集:これは私のためにトリックをしました:http: //jsfiddle.net/z8yaB/
要素(例:div class = "myiv")がホバーされた後に実行される関数があるかどうか疑問に思い、ホバーされているかどうかをXミリ秒ごとに確認し、ホバーされている場合は別の関数を実行します。
編集:これは私のためにトリックをしました:http: //jsfiddle.net/z8yaB/
jQueryには、この機能をすぐに使用できるhover()メソッドがあります。
$('.myiv').hover(
function () {
// the element is hovered over... do stuff
},
function () {
// the element is no longer hovered... do stuff
}
);
要素がまだホバーされているかどうかをxミリ秒ごとにチェックして応答するには、次のように調整します。
var x = 10; // number of milliseconds
var intervalId;
$('.myiv').hover(
function () {
// the element is hovered over... do stuff
intervalId = window.setInterval(someFunction, x);
},
function () {
// the element is no longer hovered... do stuff
window.clearInterval(intervalId);
}
);
デモ-http ://jsfiddle.net/z8yaB/
variablename = setInterval(...)
マウスオーバーで機能を繰り返し開始し、clearInterval(variablename)
マウスアウトで停止するために使用できます。
var marker;
$('#test').on('mouseover', function() {
marker = setInterval(function() {
$('#siren').show().fadeOut('slow');
}, 500);
}).on('mouseout', function() {
clearInterval(marker);
});
単純なインターフェイスでのほとんどの目的では、jqueryのホバー関数を使用して、マウスがホバーしている場合はブール値に格納するだけです。次に、単純なsetInterval
ループを使用して、この状態をミリ秒ごとにチェックできます。あなたはまだ最初のコメントでこの答えをリンクされた複製で見ることができました(編集:そして今ここの他の答えで)。
ただし、特に、マウスとオブジェクトの間を移動するオブジェクトがあり、ホバーすると誤ったアラームが生成される場合があります。
そのような場合、jqueryがハンドラーを呼び出すときにイベントが本当に要素をホバーしているかどうかをチェックするこの関数を作成しました:
var bubbling = {};
bubbling.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;
};
この関数を使用して、mouseoutイベントを受け取ったときにマウスが実際に離れたことを確認します。
$('body').delegate(' myselector ', 'mouseenter', function(event) {
bubbling.bubbleTarget = $(this);
// store somewhere that the mouse is in the object
}).live('mouseout', function(event) {
if (bubbling.eventIsOver(event, bubbling.bubbleTarget)) return;
// store somewhere that the mouse leaved the object
});
var interval = 0;
$('.myiv').hover(
function () {
interval = setInterval(function(){
console.log('still hovering');
},1000);
},
function () {
clearInterval(interval);
}
);