2

Well, I have this container, then inside it, it has contents. To navigate it, the user has to hover the button (up or down) for the container to move.

If I click the arrow up button, the container should not go top since the position of the container is 0. It should remain the same like this one.

Here's the screen shot for you guys to understand.

enter image description here and... enter image description here

Here's the reference where I got the code

jquery continuous animation on mouseover

Any help would be appreciated, This is the js fiddlink --> JS FIDDLE LINK

Code: (required by 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();
  });
Community
  • 1
  • 1
Wesley Brian Lachenal
  • 4,381
  • 9
  • 48
  • 81

2 Answers2

1

Try this,

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

Full code

$(".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

Rohan Kumar
  • 40,431
  • 11
  • 76
  • 106
0

try this

step:function(now,fx)
{

if(now<0)
//stop animate here

}

in animate() http://api.jquery.com/animate/

akbar ali
  • 427
  • 2
  • 6