Ming Ming - 5 years ago 145
HTML Question

Jquery animate left on hover not working perfectly

I have created a script that moves an li to the left 40px on mouseenter and moves it back on mouseleave. It works fine most of the time, however it will often glitch so that it moves to the left and does not record mouseleave, so it will stay 40px to the left. Then when you mouseenter again, it will move a further 40px. This ends up with a misaligned list .

misaligned list Image -

misaligned list Image

Here is the html:

<div class="work">
<h1 class="heading">Selected Projects</h1>
<div class="line"></div>
<ul>
<li id="darl">
<div class="container2"><div class="block">
<img class="bg-image" id="bgimg1" src="Images/perspective2final2pfolio2.jpg">
</div></div>
<a href="">1. Darlington Terrace</a>
</li>

<li><div class="thinline"></div></li>
<li id="chil">
<div class="container2"><div class="block">
<img class="bg-image" id="bgimg2" src="Images/DSC_0756.jpg">
</div></div>
<a href="">2. Children's Playground</a>
</li>

<li><div class="thinline"></div></li>
<li>
<div class="container2"><div class="block">
<img class="bg-image" id="bgimg3"src="Images/perspective2final2pfolio2.jpg">
</div></div>
<a href="">3. Lawn Bowl Bakery Bridge</a>
</li>

<li><div class="thinline"></div></li>
<li>
<div class="container2"><div class="block">
<img class="bg-image" id="bgimg4"src="Images/perspective2final2pfolio2.jpg">
</div></div>
<a href="">4. Aqueduct: Museum of Architecture</a>
</li>

<li><div class="thinline"></div></li>
<li>
<div class="container2"><div class="block">
<img class="bg-image" id="bgimg5"src="Images/perspective2final2pfolio2.jpg">
</div></div>
<a href="">5. Velocity Frequent Flyer Website</a>
</li>

<li><div class="thinline"></div></li>
</ul>

</div>


Here is the jquery:

$(document).ready(function(){
$(".work ul li a").on("mouseenter", function() {
$(this).animate({
left: "-=40px",
}, 200)
});
$(".work ul li a").on("mouseleave", function() {
$(this).animate({
left: "+=40px",
}, 200)
});
$("#darl").on({
mouseenter: function() {
$("#bgimg1").fadeIn(200);
},
mouseleave: function() {
$("#bgimg1").fadeOut(200);
}
});
$("#chil").on({
mouseenter: function() {
$("#bgimg2").fadeIn(200);
},
mouseleave: function() {
$("#bgimg2").fadeOut(200);
}
});
})


Here is the github repo: https://github.com/mingweichan/CVwebsite

Answer Source

I encountered this sometime ago, you will want to add a .stop() before calling .animate because it seems to me jQuery registers each event and puts them into a stack and iterates through every item in the stack.

In other words, if you move your mouse over and out of the element 10 times quickly, the events will fire 10 times.

However for your case add a .stop() will fix one problem but because you're using relatives values to animate the left property it doesn't seem to complete the animation before the next event is fired. I suggest using absolute values:

$(".work ul li a").on("mouseenter", function() {
  $(this).stop().animate({
      left: "-40px",
  }, 200)
});
$(".work ul li a").on("mouseleave", function() {
  $(this).stop().animate({
      left: "0px",
  }, 200)
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download