Question

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

无论如何，让我们学习如何让下面更好！

的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 -->

小提琴：http://jsfiddle.net/9xRML/5/

修改 - 最终代码

感谢@Shomz和@Afro。

最终的代码选择是使用tranisitons，再加上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

我认为我已使用相同的HTML解决了您的问题，但更改了以下内容：

<强> JQuery的

$('aside .feature').hover(function() {
    $(this).find('.overlay').stop(true, true).fadeIn();
}, function() {
    $(this).find('.overlay').stop(true, true).fadeOut();
});

<强> CSS

.feature {
    background: #ccc;
}
.overlay {
    display: none;
}

这意味着叠加层只会在悬停时显示。

有关.stop() can be found here的详细信息。

.stop（true，true）

我们可以通过向链添加.stop（true，true）来创建一个很好的淡入淡出效果，而不会出现多个排队动画的常见问题。

<强> DEMO

Answer 2

由于冒险让我的答案超出范围，如果你想真正获得性能，你应该切换到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/（当然还有更多）

jQuery悬停动画效率

2 个答案: