Имея выпуск на JQuery MouseMove влево и вправо

Question

Можете ли вы, пожалуйста, посмотрите на this Demo и дайте мне знать, как я могу изменить использование .css() правила background-position-x события только тогда, когда мышь перемещается влево или вправо на .homeSlide? что происходит сейчас, как только мышь входит в .homeSlide JQuery работает правило CSS, но я хочу сделать это только тогда, когда мышь движется

jQuery('.homeSlider').mousemove(function(move){ 
 
    var moveMouse = (move.pageX * -1/3); 
 
    jQuery('.homeSlider .slide').css({ 
 
     'background-position-x': moveMouse + 'px' 
 
    }); 
 
}); 
 

 
jQuery('.homeSlider').mouseleave(function(){ 
 
    jQuery('.homeSlider .slide').animate({ 
 
     'background-position-x': '0' 
 
    }); 
 
});

.homeSlider {width: 100%; height: 400px; background: red;} 
 
.homeSlider .slide {width:100%; height: 100%; background: url(http://1.bp.blogspot.com/-JHKDpZ5orFc/T0523m_rAlI/AAAAAAAAAEU/zYZv__hk74I/s1600/Panorama_by_erikcollinder.jpeg) 0 0;} 
 
.slide {transition: background-position-x 0.5s;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="homeSlider"> 
 
    <div class="slide"></div> 
 
</div>

Answer 1

Проблема, когда мышь входит в элемент изображения, он уже имеет й позицию, так что изображение двигается от й. Поэтому нам нужно решить начальную точку для позиции x.
Попробуйте этот код:

var startingPos = 0; 

jQuery('.homeSlider').mousemove(function(move){ 
    var moveMouse = (move.pageX * -1/3); 
    if(startingPos == 0){ 
     startingPos = moveMouse; 
     return; 
    } else { 
     moveMouse = moveMouse-startingPos; 
    } 
    jQuery('.homeSlider .slide').css({ 
     'background-position-x': moveMouse + 'px' 
    }); 
}); 

jQuery('.homeSlider').mouseleave(function(){ 
    startingPos = 0; 
    jQuery('.homeSlider .slide').animate({ 
     'background-position-x': '0' 
    }); 
}); 

Answer 2

Попробуйте изменить background-position-x 0.5s к background-position-x 0.0s. Проверьте это fiddle, который представляет собой комбинацию с другим ответом user3580410 обеспечивает

Answer 3

Try и положить на левую и правую сторону «<» или «>» изображение HREF на них делают действие парения, который будет изменять положение изображения так, как вы хотите это реагировать. Ниже приведен пример: http://tympanus.net/Blueprints/FullWidthImageSlider/