在列表項上懸停背景顏色變化的漸變

Question

好的，代碼應該做的是更改li標籤的背景顏色。但是，它必須以動畫的方式完成。即背景顏色不應該立即改變。背景顏色應該在幾秒鐘內逐漸設置。

我寫這一點，即使它不設置背景顏色很好，它不會做它逐漸：

// Subtle navigation on hover color animation 

$(document).ready(function() { 
    $(".navigation li").hover(

    function() { 
     // Over 
     $(this).animate(
     $(this).css("background", "rgba(159,223,188, 0.9)"), 
     300); 
    }, 

    function() { 
     // Out    
     $(this).animate(
     $(this).css("background", "none"), 
     300); 
    } 

    ); 
}); 

的HTML是相當簡單：

<ul class="navigation"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 

感謝任何指向正確的方向！

Answer 1

如果你想堅持JavaScript解決方案，看看Color animation plugin。

或者我會建議使用CSS3過渡。你甚至都不需要的JavaScript：

li { 
    background-color: rgba(159,223,188, 0.9); 
    -webkit-transition: background-color 0.3s linear; 
    -moz-transition: background-color 0.3s linear; 
    -ms-transition: background-color 0.3s linear; 
    -o-transition: background-color 0.3s linear; 
    transition: background-color 0.3s linear; 
} 

li:hover { 
    background-color: transparent; 
} 

演示

Try before buy

Answer 2

你應該做這樣的：

$(document).ready(function() { 
    $(".navigation li").hover(

    function() { 
     // Over 
     $(this).animate({ 
      background: 'rgba(159,223,188, 0.9)' 
     }, 300); 
    }, 

    function() { 
     // Out    
     $(this).animate({ 
      background: 'none' 
     }, 300); 
    } 

    ); 
}); 

你不需要的.css()，你只需將樣式傳遞給.animate()函數即可。你也可以傳遞多種效果。

去here欲瞭解更多信息。

Answer 3

您也可以嘗試這樣做：

以下CSS添加到您的第二個功能

  "background": "none", 
      "transition-property": "background", 
      "transition-duration": "1s", 
      "transition-timing-function": "linear" 

檢查以下

的代碼，你可以增加的「過渡期的價值「：」1s「到更多延遲的任何秒鐘。

希望這有助於

$(document).ready(function(){ 

    $(".navigation li").hover(

     function(){ 
      // Over 
      $(this).animate(
       $(this).css("background","rgba(159,223,188, 0.9)"), 
       300 
      ); 
     }, 
     function(){ 
      // Out    
      $(this).animate(
       $(this).css(
        { 
        "background": "none", 
        "transition-property": "background", 
        "transition-duration": "1s", 
        "transition-timing-function": "linear" 
        } 

       ), 
       300 
      ); 
     } 

    ); 
});