Javascript 如何在滑块开始工作之前/之后获取此信息？

我正试着去上班，但有点不对劲

问题是：

这是我的HTML文档的

：

<script> 

var $after = $('.after'),
        img_width = $('.after img').width(),
        init_split = Math.round(img_width/2);

  $after.width(init_split);  

        $('.before_after_slider').mousemove(function(e){
        var offX  = (e.offsetX || e.clientX - $after.offset().left);
            $after.width(offX);
        });

        $('.before_after_slider').mouseleave(function(e){
        $after.stop().animate({
        width: init_split
        },1000)
        });

</script>

---

当DOM准备就绪时调用函数

尝试：

---

@adeneo ok现在js正在工作，但滑块正在横向移动第二个图像，并且它不在另一个图像的顶部..ok。我是JS新手，你有什么建议吗？更改CSS中的样式以获得正确的定位。@adeneo这就是正在发生的事情。。别以为这只是CSS，谢谢！现在的问题是。

 <div class="before_after_slider">
      <div class="before">
        <img src="center_before.jpg" width="100%" height="100%" alt="before" />
      </div>
      <div class="after">
        <img src="center_after.jpg" width="100%" height="100%"  alt="after" />
      </div>
    </div>

.before_after_slider {
  position: relative;

  & > * {
    position: absolute;
  }
}

.after {
  overflow: hidden;
}

$(document).ready(function () {
    var $after = $('.after'),
        img_width = $('.after img').width(),
        init_split = Math.round(img_width / 2);

    $after.width(init_split);

    $('.before_after_slider').mousemove(function (e) {
        var offX = (e.offsetX || e.clientX - $after.offset().left);
        $after.width(offX);
    });

    $('.before_after_slider').mouseleave(function (e) {
        $after.stop().animate({
            width: init_split
        }, 1000)
    });
});