изпълнете 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()
});

Просто не мога да разбера как да изпълня това, когато мишката не се движи повече от секунда. Някакви идеи?

Благодаря и ето jsfiddle


javascript jquery mouseevent
person Ryan Saxe    schedule 22.06.2013    source източник
comment
актуализирайте променлива mouseLastMoved при всяко преместване и използвайте setTimeout, за да проверите дали now > mouseLastMoved + x seconds?   -  person Popnoodles    schedule 22.06.2013
comment
Не разбирам напълно какво искате, но го актуализирах, за да използва новия ви код: jsfiddle.net/wVVbT/ 9 - това помага ли?   -  person Joe    schedule 22.06.2013
comment
Трябва ми този ред да се изпълни, когато мишката спре да се движи... така че актуализираният код, който току-що публикувахте, не е това, което искам   -  person Ryan Saxe    schedule 22.06.2013
comment
@RyanSaxe - добре, какво ще кажете за това: jsfiddle.net/wVVbT/13 (забележка: кредитът е към adeneo, току-що добавих и премахнах няколко бита код)   -  person Joe    schedule 22.06.2013

Отговори (2)


arrow_upward
7
arrow_downward

това ли ти трябва? jsFiddle

lastTimeMouseMoved = new Date().getTime();
var t = setTimeout(function() {
  var currentTime = new Date().getTime();
  if (currentTime - lastTimeMouseMoved > 1000) {
    $('.fall').fadeOut('slow');
    // $('.fall').remove();
  }
}, 1000)
person Varun    schedule 22.06.2013
comment
Това е почти перфектно!! Точно това е смисълът... но не избледнява, просто се премахва - person Ryan Saxe; 22.06.2013
comment
просто коментирайте // $('.fall').remove(); това ще свърши работа - person Varun; 22.06.2013
comment
@Down voter - в случай че гласувате против отговор, моля, не се колебайте да опишете причината за същото - person Varun; 22.06.2013

arrow_upward
15
arrow_downward

Добавяте таймаут, който се задейства след една секунда неактивност, и изчиствате таймаута, ако мишката се премести в рамките на 1 секунда и т.н.:

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

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

FIDDLE

РЕДАКТИРАНЕ:

Ето как бих го направил

FIDDLE

person adeneo    schedule 22.06.2013
comment
Целта е да ги накарате да изчезнат при спиране. Това не прави това, а просто спира да рисува. и тогава не можеш да започнеш отново... - person Ryan Saxe; 22.06.2013
comment
@RyanSaxe - Но не изчезват ли вече? Както и да е, редактирах отговора, същият принцип за определяне кога мишката спря за секунда и т.н. - person adeneo; 22.06.2013
comment
@adeneo - Мисля, че искат нещо подобно: jsfiddle.net/wVVbT/13 - всички те трябва да направите, за да накарате вашите да работят както искат, е да премахнете няколко реда в оригиналната им функция. - person Joe; 22.06.2013
comment
@adeneo +1 Страхотен подход! Само една бележка. За най-добри практики вашият код по-горе и във цигулката вероятно трябва да използва clearTimeout, а не clearInterval, тъй като задавате таймаут. Вижте stackoverflow.com/questions/9913719/ - person dallin; 05.05.2017