CODEWITHSUNDEEP
jquery
Beetlejuice
Beetlejuice

Reputation: 4425

Stop jquery animation before start another

I have in my page something like this:

http://jsfiddle.net/larini/wL3ugost/

If you move mouse fast between the options, the animations remains executing after you stop.

How to prevent this animation behavior?

html:

<div id="all-tours">
  <h1>Guided Tours</h1>
  <ul>
    <li class="tour usa">
      <h2>New York</h2>
      <span class="details">$1,899 for 7 nights</span>
      <span class="per-night"><span class="price">$275</span>/night</span>
    </li>
    <li class="tour france" data-discount="99">
      <h2>Paris</h2>
      <span class="details">$1,499 for 5 nights</span>
      <span class="per-night"><span class="price">$300</span>/night</span>
    </li>
    <li class="tour uk" data-discount="149">
      <h2>London</h2>
      <span class="details">$2,199 for 5 nights</span>
      <span class="per-night"><span class="price">$440</span>/night</span>
    </li>
  </ul>
</div>

javascript:

$(document).ready(function() {
  $('.tour').on('mouseenter', function() {
    $(this).addClass('highlight');
    $(this).find('.per-night').animate({'top': '-14px', 'opacity': '1'}, 'fast');
  });
  $('.tour').on('mouseleave', function() {
    $(this).removeClass('highlight');
    $(this).find('.per-night').animate({'top': '0', 'opacity': '0'}, 'fast');
  });
});

css:

#all-tours ul li {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: rgba(37, 43, 48, 0.5);
  float: left;
  min-height: 6em;
  padding: 0.5em;
  position: relative;
  vertical-align: top;
  width: 22.75%;
}
#all-tours ul li {
  width: 24.25%;
}


#all-tours ul li.highlight {
  background: rgba(255, 255, 99, 0.5);
}

#all-tours ul li .per-night {
  opacity: 0;
  -moz-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
  position: absolute;
  top: 0px;
  right: -13px;
}

Upvotes: 0

Views: 48

Answers (1)

user3272018
user3272018

Reputation: 2419

This is my fork of your fiddle. Just use stop method.

UPD: Code samples

$(this).find('.per-night').stop().animate({'top': '-14px', 'opacity': '1'}, 'fast');

and

$(this).find('.per-night').stop().animate({'top': '0', 'opacity': '0'}, 'fast');

Upvotes: 1

Related Questions