javascript - jQuery 鼠标悬停动画 slider

Question

嗯，我有这个容器，然后里面有内容。要导航它，用户必须将鼠标悬停在(向上或向下)按钮上才能移动容器。

如果我单击向上箭头按钮，容器不应位于顶部，因为容器的位置为 0。它应该像这个一样保持不变。

这是屏幕截图，供大家理解。

和...

这是我得到代码的引用

jquery continuous animation on mouseover

任何帮助将不胜感激，这是 js fiddlink --> JS FIDDLE LINK

代码:(SO 要求)

$.fn.loopingAnimation = function(props, dur, eas)
  {
      if (this.data('loop') == true)
      {
         this.animate( props, dur, eas, function() {
            if( $(this).data('loop') == true ) $(this).loopingAnimation(props, dur, eas);
         });
      }
      return this;
}

var height = $("#recipeIndex1").height();

$(".btnUp").hover(function() {

    $(".recipeIndex").data('loop', true).stop().loopingAnimation({ top: "+"+ height +"px"}, 2000);
  }, function() {
    $(".recipeIndex").stop();
  });

Answer 1

试试这个，

newH =  $('.recipeIndexImage img:first').offset().top < 0 ? 0 : height;

完整代码

$(".btnUp").hover(function () {
    newH = $('.recipeIndexImage img:first').offset().top < 0 ? 0 : height;
    $(".recipeIndex").data('loop', true).stop().loopingAnimation({
        top: "+" + newH + "px"
    }, 2000);
}, function () {
    $(".recipeIndex").stop();
});

Demo