jQuery鼠标悬停Animate滑块

Question

好吧，我有这个容器，然后在里面，它有内容。要进行导航，用户必须将按钮（向上或向下）悬停在容器上才能移动。

如果我单击向上箭头按钮，容器不应该位于顶部，因为容器的位置为0.它应该保持与此类似。

以下是您要了解的屏幕截图。

并...

以下是我获得代码的参考资料

jquery continuous animation on mouseover

任何帮助将不胜感激，这是js fiddlink - ＆gt; 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

Answer 2

试试这个

step:function(now,fx)
{

if(now<0)
//stop animate here

}

在animate（）http://api.jquery.com/animate/

中