使用jquery

Question

我的目标是产生这样的效果：

我得到了什么：

http://cssdeck.com/labs/collab/rxaunz5m/0

我希望在鼠标移动框架时发生这种效果，因此它会慢慢地将图片从一个图像移到另一个图像。可能吗？怎么样？ ：）

CODE：

HTML

WITH EFFECT:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-4">
<div class="frame">
  <div class="image-container">
    <img class="first" src="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png">
    <img class="second" src="http://davidnaylor.org/temp/firefox-logo-200x200.png">
  </div>
  <div class="line">
    ABC
  </div>
</div>
</div>



WITH-OUT EFFECT:
<div class="col-md-4">
<div class="frame2">
  <div class="image-container2">
    <img class="first2" src="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png">
  </div>
  <div class="line2">
    ABC
  </div>
 </div>
</div>

CSS

/* For real picture [upper] */
/* CHANGE */
div.frame{
  border: 2px solid black;
  text-align: center;
  margin: 0px 0px 20px 0px;
  width: 100%;
  float: right;
}

div.image-container{
    padding-bottom: 25px;
    padding-top: 20px;

    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
}

.first, .second{
    width: 200px; /* I've 200x200 pics */
    position: absolute
}

.second{
  left: 0%
}

.line{
  border-top: 2px solid black;
}

/* DONT CHANGE */
/* For test picture [lower one]*/
.col-md-4{
  width: 33%;

  /* To see frame easier */
  padding-left: 20px;
  padding-top: 20px;
}

div.frame2{
  border: 2px solid black;
  text-align: center;
  margin: 0px 0px 20px 0px;
  width: 100%;
  float: right;
}

div.image-container2{
    padding-bottom: 25px;
    padding-top: 20px;
}

.first2, .second2{
    width: 200px; /* I've 200x200 pics */
}

.line2{
  border-top: 2px solid black;
}

jquery的

  var mouseX = 0,
  second = $(".second"),
  xp = 0,
  offset = 0,
  clrTimeout = null,
  limitX = $('.image-container').width() - offset;
$('.image-container').mousemove(function(e) {
  clearTimeout(clrTimeout);
  mouseX = Math.min(e.pageX - $(this).offset().left, limitX);
  if (mouseX < offset) mouseX = offset;
  xp += (mouseX - xp);
  second.css({
    left: xp
  });
});