CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
AJ Naidas
AJ Naidas

Reputation: 1424

jQuery mouseover interval

I am trying to create the same mouseover scroll effect in this plugin: (try hovering over the arrow)

http://coffeescripter.com/code/ad-gallery/

I have this script:

$('#leftArrowScroller').bind('mouseover',function() {
        setInterval(function(){
            currentGalleryScroll -= 10;
            $('#scrollMove').animate({'left':currentGalleryScroll+'px'});
        },1);
    });

However, this script doesn't accomplish the same effect. It animates the div to the left as I wanted to but it pauses after each interval. Any ideas on how to make the scrolling smoother like the one in the link? Thanks!

Upvotes: 0

Views: 369

Answers (2)

GregL
GregL

Reputation: 38113

If you look at the code that the plugin uses, you get the following function:

function () {
  var direction = 'left';
  if($(this).is('.ad-forward')) {
    direction = 'right';
  };
  thumbs_scroll_interval = setInterval(
    function() {
      has_scrolled++;
      // Don't want to stop the slideshow just because we scrolled a pixel or two
      if(has_scrolled > 30 && context.settings.slideshow.stop_on_scroll) {
        context.slideshow.stop();
      };
      var left = context.thumbs_wrapper.scrollLeft() + 1;
      if(direction == 'left') {
        left = context.thumbs_wrapper.scrollLeft() - 1;
      };
      context.thumbs_wrapper.scrollLeft(left);
    },
    10
  );
  $(this).css('opacity', 1);
}

Note how it does it's own animating, setting the .scrollLeft() property inside the interval. You might wish to do a similar thing.

Upvotes: 1

JIA
JIA

Reputation: 1495

try defining the scroll duration 

    $('#leftArrowScroller').bind('mouseover',function() {
            setInterval(function(){
                currentGalleryScroll -= 10;
                $('#scrollMove').animate({'left':currentGalleryScroll+'px'},3000);
            },1);
        });

i dont think you need a setInterval function try removing the setInterval

$('#leftArrowScroller').bind('mouseenter',function() {              
            currentGalleryScroll -= 10;
            $('#scrollMove').animate({'left':currentGalleryScroll+'px'},3000);

            });

Upvotes: 0

Related Questions