jQuery background gradients on hover

Question

I currently have an unordered list, which when hovering each list item the parent background gradient changes. This was easy enough, but my problem is that I want to be able to fade the gradients together on hover - preventing instant colour change.

I found this example, but I can't seem to find any documentation on how to trigger the colour change on hover: https://codepen.io/quasimondo/pen/lDdrF

Any and all help would be appreciated.

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

http://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds right now there is no easy way to transition between gradients ... the codepen you link has that "effect" because it is going step by step from one color to other and executing every 10 miliseconds — DaniP, Mar 08 '17 at 17:37

score 0 · Answer 1 · answered Mar 08 '17 at 18:15

You don't need JS to achieve this.

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

jQuery background gradients on hover

1 Answers1