CODEWITHSUNDEEP
jqueryhoverfadeinfadeout
awnine
awnine

Reputation: 153

mouseover function occurring multiple times in a queue

I have this code that fades a div over another one upon mouseover, and fades out when the cursor leave the viewing area.

EXAMPLE: http://jsfiddle.net/3vgbemgu/

$('.under').hover(function () {
$('.over').fadeIn();
}, function () {
$('.over').fadeOut();
});

however, if the user moves the mouse over the area quickly multiple times, the animation creates a queue, meaning the div fades in and out various times one after another. This is much more obvious is there are multiple instances of this animation on screen, or if the fade in and out times are longer.

How would I stop the animation retriggering while it is still occurring the first time?

Upvotes: 1

Views: 670

Answers (2)

Mihai Matei
Mihai Matei

Reputation: 24276

You can use .mouseenter() and .mouseleave() instead. They are triggered only once.

$('.under').mouseenter(function() {
  $('.over').fadeIn();
}).mouseleave(function() {
  $('.over').fadeOut();
});

Upvotes: 0

Alex Char
Alex Char

Reputation: 33218

You can use jquery .stop():

$('.under').hover(function() {
  $('.over').stop(true, true).fadeIn();
}, function() {
  $('.over').stop(true, true).fadeOut();
});
.frame {
  position: absolute;
  width: 400px;
  height: 300px;
}
.under {
  width: 100%;
  height: 100%;
  z-index: 1;
}
.under img {
  width: 100%;
  height: 100%;
}
.over {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 36px;
  text-align: center;
  color: yellow;
  background: rgba(64, 64, 64, 0.5);
  top: 0;
  left: 0;
  z-index: 2;
  display: none;
}
span {
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="frame">
  <div class="under">
    <img src="http://www.thetimes.co.uk/tto/multimedia/archive/00342/114240651_cat_342943c.jpg">
    <div class="over">
      <a href="http://www.w3schools.com/css/css_positioning.asp">
        </br><span>Link 1</span>
      </a>
      </br>
      </br>
      </br><a href="http://smallbusiness.chron.com/stretch-image-horizontally-css-43652.html"><span>Link 2</span></a>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions