鼠标悬停背景运动

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