Edit in JSFiddle

$(function() {
    var $slide = $("#container > ul > li");

    $slide.on('mouseenter', function() {
            var prev = $slide.filter(".now").removeClass("now").index();
            var now = $(this).addClass("now").index();

            if (now == prev) {
                return;
            } else if (now < prev) {
                $slide.css("background-position", "-800px 0");
                $slide.removeClass("bg1 bg2 bg3").addClass("bg" + (now + 1));
                $slide.each(function(i) {
                    $(this).stop().animate({"background-position-x": (-266 * i) + "px"}, 300 + 100*i,
                    function() {
                        if (i == 2)
                        $("#container").removeClass().addClass("bg" + (now + 1));
                    });
                });
            } else {
                $slide.css('background-position', '800px 0');
                $slide.removeClass("bg1 bg2 bg3").addClass("bg" + (now + 1));
                $slide.each(function(i) {
                    $(this).stop().animate({'background-position-x': (-266 * i) + 'px'}, 500 - 100*i,
                    function() {
                        if (i == 2)
                        $("#container").removeClass().addClass("bg" + (now + 1));
                    });
                });
            }
        }
    );
});

<div id="container" class="bg1">
    <ul>
        <li class="bg2 now" style="background-position: 0 0;">
        </li>
        <li class="bg2" style="background-position: -266px 0;">
        </li>
        <li class="bg2" style="background-position: -532px 0;">
        </li>
    </ul>
</div>

* {
  margin: 0;
  padding: 0;
}
.bg1 {
  background: url(http://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/images/1.jpg) no-repeat;
}
.bg2 {
  background: url(http://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/images/2.jpg) no-repeat;
}
.bg3 {
  background: url(http://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/images/3.jpg) no-repeat;
}
#container {
  position: relative;
  width: 797px;
  height: 542px;
  margin: 0 auto;
  top: 50px;
}
ul {
  position: relative;
  width: 100%;
  height: 100%;
  list-style-type: none;
}
li {
  width: 265px;
  height: 542px;
  border-right: 1px solid #fff;
  float: left;
  overflow: hidden;
}
li:last-child {
  border-right: 0;
}