jQuery背景勾配でホバー

Question

私は現在、各リスト項目をホバリングすると、親の背景グラデーションが変化する順序付けられていないリストを持っています。これは十分に簡単でしたが、私の問題は、瞬時の色の変化を防ぐために、ホバー上でグラデーションを一緒にフェードインできるようにしたいということです。

私はこの例を見つけましたが、私はホバー上の色の変化をトリガーする方法上の任意のドキュメントを見つけるように見えることはできません。https://codepen.io/quasimondo/pen/lDdrF

任意およびすべてのヘルプをいただければ幸いです。

JS

/* Variables */ 
var defaultGradient = '120deg, #fa709a 0%, #fe9e40 100%', gradients = ['120deg, #908bbf 0%, #dc93a0 100%', '120deg, #6c6860 0%, #525252 100%', '120deg, #fa709a 0%, #f9e060 100%', '120deg, #428f94 0%, #93d081 100%', '120deg, #6d5d62 0%, #737272 100%']; 

/* Default Gradient */ 
$('ul').css({'background': 'linear-gradient('+defaultGradient+')'}); 

$('ul > li').on('mouseenter', function() { 

    /* li Index */ 
    var index = $('ul > li').index(this); 

    /* Gradient CSS */ 
    $('ul > li').parent().css({'background': 'linear-gradient('+gradients[index]+')'}); 

    /* Update Default Gradient */ 
    defaultGradient = gradients[index]; 

}).on('mouseleave', function() { 

    /* Index */ 
    var index = $('ul > li').index(this); 

    /* Updated Default Gradient */ 
    $('ul > li').parent().css({'background': 'linear-gradient('+defaultGradient+')'}); 

}); 

HTML

<ul> 
    <li>Zero</li> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
</ul> 

SCSS

ul { 
    margin:0; 
    padding:0; 
    width:100vw; 
    height:100vh; 
    display:block; 
    li { 
    margin:0; 
    padding:0; 
    width:100vw; 
    height:20vh; 
    display:block; 
    } 
} 

Answer 1

あなたはこれを達成するためのJSを必要としません。

HTML

<a href="#" id="blue">Blue</a><br> 
<a href="#" id="yellow">Yellow</a><br> 
<a href="#" id="green">Green</a> 
<div id="gradient"></div> 

CSS

body { 
    padding: 0; 
    margin: 0; 
} 

#gradient { 
    width: 100%; 
    height: 800px; 
    padding: 0; 
    margin: 0; 
    background-color: deeppink; 
    background-image: linear-gradient(white, rgba(255,255,255,0)); 
    transition: background-color 1s; 
} 

#blue:hover ~ #gradient { 
    background-color: blue; 
} 

#yellow:hover ~ #gradient { 
    background-color: yellow; 
} 

#green:hover ~ #gradient { 
    background-color: red; 
} 

FIDDLE