javascript - jQuery 悬停动画效率

Question

我的悬停工作正常 - 但我有兴趣尝试提高它的效率，因为它在找到 .overlay div 时似乎确实“滞后”。我还遇到了一个问题，我正在为页面上的所有 .overlay div 设置动画，我认为这是一个相当菜鸟的错误。

无论如何，让我们学习如何使下面的内容变得更好!

jQuery:

// get aside feature
var aside_feature = $('aside .feature');

// on hover, fade it in
$( aside_feature ).hover(function() {
    // get the overlay div
    var feature_overlay = $(this).find('.overlay');
    $(feature_overlay).stop().fadeIn();
// on hover out, fade it out
}, function() {
    $(this).find('.overlay').stop().fadeOut();
});

标记:

<aside>
    <div class="feature">
        <div class="overlay">
            <a href="">button</a>
        </div><!-- overlay -->                                          
        <div class="text">
            <p>text</p>
        </div><!-- .text-->
        <div class="image">
            <figure>
                <img src="" alt="">
            </figure>
        </div><!-- .image -->
    </div><!-- .feature -->
</aside><!-- aside -->

fiddle :http://jsfiddle.net/9xRML/5/

编辑 - 最终代码

感谢@Shomz 和@Afro。

最终的代码选择是使用 transisitons，并结合 modernizr detection for transitions ，我将隐藏的覆盖 div 更改为 opacity: 0; *display:none; 和 javascript 作为后备:

CSS

.overlay {
   *display: none;
   opacity: 0; 
   transition: 0.4s all linear;
}
.overlay:hover {
   opacity: 1;
}

jQuery

$(function () {
    /*=====================================
    =           Feature overlay           =
    =====================================*/
    if (!Modernizr.csstransitions) {
        // get aside feature
        var aside_feature = $('aside .feature');

        // on hover, fade it in
        $( aside_feature ).hover(function() {
            $(this).find('.overlay').stop(true, true).fadeIn();
        // on hover out, fade it out
        }, function() {
            $(this).find('.overlay').stop(true, true).fadeOut();
        });
    }
});

Answer 1

冒着让我的答案超出范围的风险，如果你想真正获得性能，你应该切换到 CSS 动画。通过将叠加层的默认不透明度设置为 0(而不是 display: none;)并使其显示在 .feature:hover 上，您的示例完全有可能。诀窍是像这样添加过渡属性:

// applies a 4ms transition to any possible property with no easing
transition: all .4s linear;

在此处查看整个示例:http://jsfiddle.net/9xRML/6/

在此处查看有关性能差异(CSS 与 JS)的精彩文章:http://css3.bradshawenterprises.com/blog/jquery-vs-css3-transitions/ (当然还有很多)