javascript - 鼠标移动时用颜色填充容器

Question

假设我有一个宽度为 100 像素，高度为 40 像素的 div，背景为橙色。我想将鼠标从左到右穿过 div，当鼠标移动时，它应该用绿色填充 div。一旦鼠标越过了 div 的末尾，颜色应保持绿色。如果鼠标光标在经过末尾之前从 div 中出来，则颜色应动画/填充回橙色。此外，鼠标必须从 div 的开头 (0px) 开始，才能启动 mousemove 效果，否则它什么也不做。

我花了几天时间研究这个问题，这让我发疯。

这是我迄今为止所拥有的 fiddle

在此处输入代码 https://jsfiddle.net/7my7etzm/

Answer 1

这个工作？

$(document).ready(function() {
  var $orangeBox = $(".orangeBox"),
      $greenBox = $(".greenBox"),
      $goalPosts = $(".goalPosts"),
      winning = function() {
        $orangeBox.unbind('mousemove').unbind('mouseleave');
        $goalPosts.remove();
      };
  
  $orangeBox.bind('mousemove', function(e) {
    var xPosition = e.pageX - this.offsetLeft;
    $goalPosts.show();
    $greenBox.css('width', xPosition);
    if (xPosition > $orangeBox.outerWidth()) {
      winning();
    }
  })
  .bind('mouseleave', function(){
    if($greenBox.outerWidth() < ($orangeBox.outerWidth() - 1)) {
      $greenBox.animate({
        width: "0"
      }, 500);
      $goalPosts.hide();
    }  
  });
});

.orangeBox{
  position:relative;
  display:block;
  height:40px;
  width:100px;
  background:orange;
}
.greenBox {
  position:absolute;
  height:100%;
  top:0;
  left:0;
  background:green;
}
.goalPosts {
  position:absolute;
  display:none;
  height:100%;
  top:0;
  left:100%;
  width:100px;
}

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