jQuery懸停動畫效率

我有我的懸停工作 - 但我有興趣試圖使它更有效，因爲它似乎'滯後'，當它發現。 overlay div。我也遇到過這樣的問題，我在網頁上爲所有.overlay div製作了動畫，我認爲這是一個不小的錯誤。jQuery懸停動畫效率

無論如何，讓我們學習如何讓以下更好！

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

來源

2014-01-28 SMacFadyen

而且你想讓所有enimovali一次？或者你需要什麼？ – Pesulap

enimovali是什麼意思，對不起？ – SMacFadyen

sry animate .... – Pesulap

對於具有我的答案超出範圍在這裏冒險，如果你想真正獲得的性能，您應該切換到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/（有很多更多，當然）

來源

2014-01-28 11:51:16 Shomz

我喜歡這個想法，我可以使用特定的CSS類來針對不支持轉換的瀏覽器。或者更好的是，modernizr jQuery：'if（！Modernizr.csstransitions）{//我的代碼};'。謝謝你在盒子外面思考，Shomz。 – SMacFadyen

@SMacFadyen當然，對於那些舊瀏覽器有一個很好的回退總是很好，對不起，我忘了把它放在第一位。別客氣！ :) – Shomz

良好的工作，我已經更新了我的答案，也納入你的。 – SMacFadyen

，我想我已經解決了使用相同的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

來源

2014-01-28 11:43:02 AfromanJ

感謝這個答案，這是有益的，我會用它作爲回退 - 但是，過渡的答案將更適合任何抵達這裏的人！ – SMacFadyen

jQuery懸停動畫效率

回答

相關問題