How can i repeat certain animation when the mouse is moved onto particular element.
And stop it immediately when mouse is moved out from element.

  $("#previous").mouseenter(function(){
        $("#scroller").animate({scrollLeft: scrollAmount}, { duration: 'slow' , easing: 'easeOutBounce' }); //need to repeat this animation for certain times
  }).mouseleave(function(){
        $("#scroller").stop();
  });

  $("#-next").mouseenter(function(){
        $("#scroller").animate({scrollLeft: scrollAmount}, { duration: 'slow' , easing: 'easeOutBounce' });//need to repeat this animation for certain times
  }).mouseleave(function(){
        $("#scroller").stop();
  });

I also tried mouseover and mouseout events but yet code's not working.

I hope i'm clear. Thanks in advance.

I *think* you'll want to animate when the mouse is over the element, not just when the mouse enters the elements. That is, you should use an mouseover event rather than mouseenter. (I'm not sure about the event names, but I'm guessing there is an event called mouseover, mousehover or similar)

i tried using mouseover and mouseout events.
But it does not respond to mouseout event untill it finished with mouseover event.Though i'm taking mouse out of triggering element.

http://unixpapa.com/js/mouse.html interesting article, though in someways out of date.

You've probably seen this, but heck it can't hurt to have this link to review over.
Mouseovers
http://api.jquery.com/mouseover/

Please correct me if I'm wrong, but:
Mouseenter and mouseleave are almost the same as mouseover and mouseout except that they don’t react to event bubbling.

I thought (too lazy to check) that mouseenter and mouseleave were IE only?

demo on http://api.jquery.com/mouseover/ shows the difference. See the increments carefully.
Mouseenter event triggers only when mouse is entered onto parent element.
Mouseover event triggers both on parent and child element.

i guess that what it is. Correct me if i'm wrong !

Originally Posted by phazorRise

How can i repeat certain animation when the mouse is moved onto particular element.
And stop it immediately when mouse is moved out from element.

  $("#previous").mouseenter(function(){
        $("#scroller").animate({scrollLeft: scrollAmount}, { duration: 'slow' , easing: 'easeOutBounce' }); //need to repeat this animation for certain times
  }).mouseleave(function(){
        $("#scroller").stop();
  });

  $("#-next").mouseenter(function(){
        $("#scroller").animate({scrollLeft: scrollAmount}, { duration: 'slow' , easing: 'easeOutBounce' });//need to repeat this animation for certain times
  }).mouseleave(function(){
        $("#scroller").stop();
  });

I also tried mouseover and mouseout events but yet code's not working.

I hope i'm clear. Thanks in advance.

Hello ,

You can do it on Hover event . instead of making in mouse enter you can use mouse hover event when mouse is moved over it it will get specified animation and when mouse is moved the animation will disappear .

I think using hover() is the best bet:

  var _hoverAnimate = function(selector, action) {
 
      var animate = (action == 'animate') ? true : false;
 
      if (animate) {
 
           $(selector).animate({scrollLeft: scrollAmount}, { duration: 'slow' , easing: 'easeOutBounce' });
 
      } else {
 
          $(selector).stop();
      }
  };
 
 
  $("#previous").hover(_hoverAnimate("#scroller", 'animate'), _hoverAnimate("#scroller", 'stop'));
 
  $("#-next").hover(_hoverAnimate("#scroller", 'animate'), _hoverAnimate("#scroller", 'stop'));

Hello ,

Instead of using $ symbol please try using jQuery some cases $ symbol Will not be working.and if dont work then please recheck your function by putting it in console available with Firefox firebug

Originally Posted by shankar.adodis

Hello ,

Instead of using $ symbol please try using jQuery some cases $ symbol Will not be working.and if dont work then please recheck your function by putting it in console available with Firefox firebug

i appreciate your help , thanks and i've solved the problem already.

And about $, it creates problem when we are using more than one library ie mootools,prototype,jquery etc together. and to avoid it jquery provides the method.

jQuery.noConflict()

the issue is discussed here - http://docs.jquery.com/Using_jQuery_...ther_Libraries

Originally Posted by mgraphic

I think using hover() is the best bet:

  var _hoverAnimate = function(selector, action) {
 
      var animate = (action == 'animate') ? true : false;
 
      if (animate) {
 
           $(selector).animate({scrollLeft: scrollAmount}, { duration: 'slow' , easing: 'easeOutBounce' });
 
      } else {
 
          $(selector).stop();
      }
  };
 
 
  $("#previous").hover(_hoverAnimate("#scroller", 'animate'), _hoverAnimate("#scroller", 'stop'));
 
  $("#-next").hover(_hoverAnimate("#scroller", 'animate'), _hoverAnimate("#scroller", 'stop'));

yeah, i guess that'd be much better. thanks