2016-08-23 2 views
1

Я хочу переместить мой переполненный div (рассчитанный на загрузку окна) вправо или влево, зависит от положения мыши пользователя. (Непрерывная анимация, пока мышь все еще там). У меня есть некоторые ошибки/проблемы.jQuery mouseover, анимация влево или вправо, а true

  1. Перемещение в направлении, не останавливаясь, пока мышь по-прежнему.
  2. Если я использую функцию анимации, это будет работать с запуском и остановкой снова и снова, что приведет к плохой анимации.

Любые идеи?

Примечание: я не хочу использовать дополнительные библиотеки, кроме jquery.

$(window).load(function() { 
    var buildingsWrapper = $('#buildings'), 
     lastBuilding = $('.building:last'); 

    buildingsWrapper.width(parseInt(lastBuilding.css('left')) + lastBuilding.width()); 

    var followMouseMove = function() { 
     var animStarted = false; 

     // ok now, mouse over but this will work for just one time. 
     buildingsWrapper.on('mouseover', function(e) { 
      if(e.clientX >= $(window).width() - 100) { 
       var left = buildingsWrapper.css('left'); 

       if(!animStarted) { 
        animStarted = true; 

        // will work but will stop and start again after animStarted set to false. that start/stop is not what i want. 
        buildingsWrapper.animate({ 
         left: parseInt(left) - 50 
        }, 300, function() { 
         animStarted = false; 
        }); 
       } 
      } 
     }); 
    }; 

    followMouseMove(); 
}); 

ответ

0

Try MouseMove:

buildingsWrapper.on('mouseover', function(){ 
    $(document).mousemove(function(e) { 
      var mouseX = e.pageX; 
      var slideT = (mouseX*(-1))+"px"; 



     buildingsWrapper.css({'left': slideT}); 
});  
     }); 

Попробуйте изменить slideT, чтобы получить анимацию вы хотите

+0

не сработает, потому что пользователь должен переместить свою мышь, чтобы оживить (идти вправо или влево). –

Смежные вопросы