Постепенное изменение цвета фона наведите на элемент списка

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

Demo

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(). Вы можете передать несколько эффектов.

Go here для получения дополнительной информации.

Answer 3

Вы также можете попробовать сделать это:

Добавьте следующий CSS к вашей второй функции

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

проверить код ниже

вы можете увеличить значение «переходного срока «:« 1 с »на любые секунды для большего количества задержек.

Надеется, что это помогает

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

    ); 
});