jQuery hover animation efficiency

Question

У меня работает мой наведение, но я заинтересован в том, чтобы сделать его более эффективным, поскольку он, кажется, «отстает», когда он находит. overlay div. У меня также была проблема, когда я анимировал все .overlay divs на странице, которую я считаю довольно пустой ошибкой.

В любом случае, давайте узнаем, как сделать снизу лучше!

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

Markup:

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

Edit - Финальный код

Спасибо @Shomz и @Afro.

окончательный выбор коды должны были использовать tranisitons, и в сочетании с Modernizr detection for transitions, я изменил свои скрытые наложенные дела до 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/ (есть много больше, конечно)

Answer 2

Я думаю, я решил проблему, используя один и тот же 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 (правда, правда)

Мы можем создать хороший эффект замирания без общей проблемы кратного очереди анимации, добавив .stop (правда, истина) в цепи.

DEMO