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);
});

這將停止所有先前的動畫或功能，並開始新的動畫或功能。

Answer 2

我喜歡jQuery，但這里最好的提示是使用css3轉換...它們效率更高，並且可以防止異步JavaScript代碼。

.feature{
   -webkit-transition:0.15s linear;
   -moz-transition:0.15s linear;
   -ms-transition:0.15s linear;
   -o-transition:0.15s linear;
   transition:0.15s linear;
   filter: alpha(opacity=93);
   opacity:0.93;
}
.feature:hover{
    filter: alpha(opacity=85);
    opacity:0.85;
}