悬停时带有方向控制的水平背景图像滚动

Question

创建带有全宽全景背景图像的水平连续滚动横幅div，默认方向是从右向左移动。

CSS

.banner {
    width: 100%;
    height: 800px;
    background-image: url('http://lorempixel.com/1920/800/');
    background-position: top left, center center;
    background-size: auto, cover;
 }

.moveControl {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

.moveRight {
    display: block;
    width: 50%;
    height: 100%;
    float: right;
}

HTML

<div class="banner">
  <div class="moveControl">
    <div class="moveRight"></div>
  </div>
</div>

现在，当 :hover 在 div 上 class 为 moveRight 时，它应该从 [=14= 时的相同位置从左向右移动].

我使用 jQuery:

进行了一次定向滚动

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script>
    (function ($) {
        "use strict";

        jQuery(window).load(function () {

            (function bgLoop() {
                $('.banner').animate({
                    'background-position': '-=50'
                }, 1000, 'linear', bgLoop);
            }());

        });

    })(jQuery);
</script>

当悬停时从相同的背景位置悬停时，如何停止循环并开始将背景图像移动到相反的方向？这可能吗？

这是JSFiddle

Answer 1

不确定这是否正是您所追求的，但您可以尝试这样的操作：

function bgLoop(position) {
  $('.banner').stop().animate({
    'background-position': position
  }, 1000, 'linear', function() {
    bgLoop(position);
  });
}

$('.banner').hover(
  function() {
    bgLoop('+=50');
  },
  function() {
    bgLoop('-=50');
});

bgLoop('-=50');

Updated fiddle

悬停时带有方向控制的水平背景图像滚动

Horizontal background image scrolling with directional controls on hover

css

jquery

jquery-animate