jQuery的鼠標提示？

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