javascript - jQuery mouseenter 技巧？

Question

我使用 jQuery 来操纵不透明度，效果非常好。然而，我是一个完美主义者，令我烦恼的是 .on('mouseover') 函数只有在过去的 .on('mouseover) 函数完成后才会触发。

HTML:

<div class="feature avans">
    <div class="feature-media">
        <img src="assets/img/avans.png"/>
    </div>
    <a href="">
        <div class="text-wrap">
            <p class="big">Avans</p>
            <h1>Finding work force &mdash; simplified.</h1>
        </div>
    </a>
</div>

CSS:

.feature-wrap {
  width: 1144px;
  margin: 0 auto;
  padding: 0;
}
.feature-wrap .feature {
  width: 100%;
  padding: 0;
  overflow: hidden;
  position: relative;
  background: black;
}
.feature-wrap .feature .feature-media {
  width: 100%;
  opacity: 0.85;
}
.feature-wrap .feature .feature-media img {
  width: 100%;
  height: 350px;
  margin: 0 0 -5px;
  padding: 0;
}
.feature-wrap .feature .text-wrap {
  width: 50%;
  position: absolute;
  top: 0;
  padding: 30px 60px 0;
}

jQuery:

$('.feature').on('mouseenter', function () {
    $(this).children('.feature-media').animate({opacity: 0.93}, 150);
});

$('.feature').on('mouseleave', function () {
    $('.feature-media').animate({opacity: 0.85}, 150);
});

此外，如果有人知道是否有一种方法可以使该功能更像 CSS 原生悬停伪选择器(即，该效果仅在鼠标实际上悬停在相关元素上时才会触发)，我会很高兴。

Answer 1

使用.stop():

$('.feature').on('mouseenter', function () {
    $(this).children('.feature-media').stop().animate({opacity: 0.93}, 150);
});

$('.feature').on('mouseleave', function () {
    $('.feature-media').stop().animate({opacity: 0.85}, 150);
});

这将停止之前的所有动画或功能，并启动新的动画或功能。