jQuery Mouse Hover Animate Slider

Question

Ну, у меня есть этот контейнер, а затем внутри него есть содержимое. Чтобы перемещаться по нему, пользователь должен навести кнопку (вверх или вниз) для перемещения контейнера.

Если я нажимаю кнопку со стрелкой вверх, контейнер не должен набирать верх, так как положение контейнера равно 0. Оно должно оставаться таким же, как этот.

Вот скриншот для вас, ребята, чтобы понять.

и ...

Вот ссылка, где я получил код

jquery continuous animation on mouseover

Любая помощь будет оценена, Это JS fiddlink ->JS FIDDLE LINK

Co де: (требуется 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 

} 

in animate()