CODEWITHSUNDEEP
javascriptjquery
Behseini
Behseini

Reputation: 6330

Having Issue on jQuery Mousemove To Left and Right

Can you please take a look at this Demo and let me know how I can change the use of the .css() rule of background-position-x event ONLY when the mouse is moving to Left or Right on the .homeSlide ? what is happening now is As soon as the mouse enters into the .homeSlide jquery is running the CSS rule but I want to do it only when the mouse is moving 

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>

Upvotes: 1

Views: 203

Answers (3)

prieston
prieston

Reputation: 1506

Try changing the background-position-x 0.5s to background-position-x 0.0s. Check this fiddle which is a combination with the other answer user3580410 provides

Upvotes: 0

Stefan Paius
Stefan Paius

Reputation: 209

Try and put on the left and right side an "<" or ">" image href on them make a hover action that will modify the position of the picture the way you want it to react. Here is an example: http://tympanus.net/Blueprints/FullWidthImageSlider/

Upvotes: 0

Sachin
Sachin

Reputation: 1218

The issue is when mouse enters the image element, it already has some x position, so the image moves by x. So we need to decide a starting point for x position.
Try this code:

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'
    });
});

Upvotes: 2

Related Questions