鼠标移动背景运动

Question

我想在鼠标悬停在div上时发生微妙的移动。

但是，微妙的部分并没有完全解决。

只要将鼠标悬停在上面，背景图像就会跳转。

$(document).ready(function() { 
    var movementStrength = 50; 
    var height = movementStrength/$(window).height(); 
    var width = movementStrength/$(window).width(); 
    $("#bg").mousemove(function(e){ 
       var pageX = e.pageX - ($(window).width()/2); 
       var pageY = e.pageY - ($(window).height()/2); 
       var newvalueX = width * pageX * -1 - 25; 
       var newvalueY = height * pageY * -1 - 50; 
       $('#bg').css("background-position", newvalueX+"px  "+newvalueY+"px"); 
    }); 
}); 

https://jsfiddle.net/cjnLtcr0/2/

Answer 1

你可以添加一个类与过渡，使用超时等待过渡结束，然后取出类：

$(document).ready(function() { 
 
    var movementStrength = 50; 
 
    var height = movementStrength/$(window).height(); 
 
    var width = movementStrength/$(window).width(); 
 
    $("#bg").on({ 
 
    mouseenter: function(e) { // on mouse enter 
 
     var pageX = e.pageX - ($(window).width()/2); 
 
     var pageY = e.pageY - ($(window).height()/2); 
 
     var newvalueX = width * pageX * -1 - 25; 
 
     var newvalueY = height * pageY * -1 - 50; 
 

 
     $('#bg').addClass('transition'); // add a transition 
 

 
     $('#bg').css({ // move background with transition 
 
     "background-position": newvalueX + "px  " + newvalueY + "px" 
 
     }); 
 

 
     setTimeout(function() { // wait .3s 
 
     $('#bg').removeClass('transition'); // remove the transition 
 
     }, 300); 
 
    }, 
 

 
    mousemove: function(e) { // on mouse move 
 
     var pageX = e.pageX - ($(window).width()/2); 
 
     var pageY = e.pageY - ($(window).height()/2); 
 
     var newvalueX = width * pageX * -1 - 25; 
 
     var newvalueY = height * pageY * -1 - 50; 
 

 
     if ($('#bg').hasClass('transition')) { // if there is a transition 
 
     //wait for above timeout to remove transition 
 
     } else { // else no transition 
 

 
     $('#bg').css({ // move the background without transition 
 
      "background-position": newvalueX + "px  " + newvalueY + "px" 
 
     }); 
 
     } 
 
    } 
 
    }); 
 
});

#bg { 
 
    background: url('http://netsketched.com/pandf/img/sun-rise-clouds.jpg'); 
 
    background-size: 100% 100%; 
 
    width: 250px; 
 
    padding: 100px; 
 
} 
 
.transition { 
 
    /*class with transition*/ 
 
    transition: all .3s 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="bg"> 
 
    <h2>Hello, world!</h2> 
 
</div>

Documentation for setTimeout