2013-06-22 26 views
10

我有一個快速的腳本,有一個線索跟隨光標:執行jQuery的,當鼠標停止移動

jQuery(document).ready(function(){ 
    $(document).mousemove(function(e){ 
     $('.fall').each(function(){ 
      if ($(this).css("opacity") == 0){ 
       $(this).remove(); 
      }; 
     }); 
     t = (e.pageY - 10).toString() + 'px'; 
     l = (e.pageX - 10).toString() + 'px'; 
     $('.fall').css("margin_left",l); 
     $('.fall').css("margin_top",t); 
     var doit = '<div class="fall" style="position:fixed;margin-left:' + l + ';margin-top:' + t + ';">+</div>' 
     $('body').prepend(doit); 
     $('#status2').html(e.pageX +', '+ e.pageY); 

     $('.fall').animate({ 
      marginTop: '+=50px', 
      opacity: 0 
     },1000);  
    }); 
}); 

現在我想刪除animate一部分,並具有類似如下當鼠標不移動:

$('.fall').each(function(){ 
    $(this).fadeOut('slow'); 
    $(this).remove() 
}); 

我只是無法弄清楚如何執行此,當鼠標不動的不是像第二更。有任何想法嗎?

感謝,並here is a jsfiddle

+0

更新會在每次移動和使用的setTimeout時間VAR'mouseLastMoved'檢查'現在> mouseLastMoved + X seconds'? – Popnoodles

+0

我不太明白你想要什麼,但我更新它使用你的新代碼:http://jsfiddle.net/wVVbT/9/ - 這有幫助嗎? – Joe

+0

當鼠標停止移動時,我需要該行來執行...因此,您剛纔發佈的更新後的代碼並不是我想要的 –

回答

4

這是你所需要的嗎? jsFiddle

lastTimeMouseMoved = new Date().getTime(); 
var t = setTimeout(function() { 
    var currentTime = new Date().getTime(); 
    if (currentTime - lastTimeMouseMoved > 1000) { 
    $('.fall').fadeOut('slow'); 
    // $('.fall').remove(); 
    } 
}, 1000) 
+0

這幾乎完美!這就是要點......但它不會淡出,它只是被刪除 –

+0

你可以做一些小的改變來做到這一點...... – Varun

+0

just comment // $('。fall')。remove();那會做 – Varun

13

你加的超時火災活動的一秒鐘,後清除超時如果1秒等內移動鼠標:

var timer; 
$(document).on('mousemove', function(e){ 
    clearTimeout(timer); 

    timer = setTimeout(function() { 
     $('.fall').fadeOut('slow', function() { 
      $(this).remove(); 
     }); 
    }, 1000); 
}); 

FIDDLE

編輯:

下面是我該怎麼做

FIDDLE

+0

目標是讓它們在停止時淡出。這不會那樣做,它只是讓它停止繪圖。然後你不能再次開始...... –

+0

@RyanSaxe - 但他們不是已經淡出?無論如何,編輯的答案,相同的原則搞清楚,當鼠標停下來一秒鐘等 – adeneo

+1

@ adeneo - 我認爲他們想要這樣的事情:http://jsfiddle.net/wVVbT/13/ - 他們需要做的一切讓你的工作如何他們想要的是刪除其原有功能的幾行。 – Joe