CODEWITHSUNDEEP
jquery
santa
santa

Reputation: 12512

Animate only once

I use jQuery .animate() to move an item once, but it seems to be moving in increments of 100px multiple times. Is it because of mouseover over?

var ww = $(window).width();

$(document).on('mouseover', '#myTarget', function () {
     var dp = $(this).offset().left;

     if ((ww - dp) < 150) {
         $('.myDiv.active').animate({left:'-=100px'},500);
     }
});

Upvotes: 1

Views: 158

Answers (3)

Nick G
Nick G

Reputation: 1973

Changing it to $(document).on('mouseenter', '#myTarget', function () { would be better. Every time your mouse enters or leaves the element or one of its children, a mouseover event is triggered. This will not happen with mouseenter. The example here shows this.

See this answer for a similar question and the source for the example provided.

Upvotes: 1

jonathanGB
jonathanGB

Reputation: 1540

Use jquery.one

$(document).one('mouseover', '#myTarget', function () {
  var dp = $(this).offset().left;

  if ((ww - dp) < 150) {
     $('.myDiv.active').animate({left:'-=100px'},500);
  }
});

Upvotes: 1

Steve H.
Steve H.

Reputation: 6947

The mouseover event is sent repeatedly while the mouse is over the target. You may want mouseenter and mouseleave

Upvotes: 1

Related Questions