jQuery add and removeClass background with transition

Question

I am currently setting my header that adding a class that changes the background to gradient.

Here is my code on adding and removing the class using jQuery.

$(document).ready(function(){
    $(window).scroll(function(){
        if($(this).scrollTop() > 100){
            $('header').addClass('gradientHeader');         
        }else{
            $('header').removeClass('gradientHeader');
        }
    });    
});

and for CSS

.gradientHeader{
    background: linear-gradient(-45deg, #57cfb0, #2ab5d3);
    transition: background 0.3s;
}

my the adding and removing class is working but the transition on background isn't triggering..

working with .css with jquery is triggering the transition but it is with background-color and i want the specific color using background: linear-gradient(-45deg, #57cfb0, #2ab5d3);

$('gradientHeader').css("background-color", "red");

and workaround doing this?

Possible duplicate of [css transition with linear gradient](https://stackoverflow.com/questions/7363141/css-transition-with-linear-gradient) — Jon Uleis, Aug 23 '17 at 17:29
linear gradient on anchor links are good, what I am trying to do is changing the background after scroll event, the problem is that transition on linear gradient using jquery isn't triggering, It just snaps to linear without transition.. T_T — Aaron Magpantay, Aug 23 '17 at 17:37
The problem is the same as the other thread - browsers cannot transition with `linear-gradient` the same way they can with background colors. The problem has nothing to do with jQuery in this case. You can apply a solution from that thread here. If you're having trouble, I'll create an answer below. — Jon Uleis, Aug 23 '17 at 17:40

score 0 · Accepted Answer · answered Aug 23 '17 at 18:00

Per my comments above, here's an answer to help you understand one method of doing this.

Using the ::before pseudo-class, I've added the linear gradient background behind our div. When I say behind, I mean it's literally under the content and normal background color of the div, since it has z-index: -1.

Then the button is toggling a .gradient class on that div, which simply makes the normal background color transparent, thus revealing the gradient underneath. Transitioning between a color and transparent is supported by browsers.

$('button').click(function() {
  $('div').toggleClass('gradient');
});

div {
  background-color: teal;
  transition: background-color .5s;
  width: 200px;
  height: 200px;
  position: relative;
}

div::before {
  background: linear-gradient(-45deg, #57cfb0, #2ab5d3);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

div.gradient {
  background-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <button>Toggle Gradient</button>
</div>

jQuery add and removeClass background with transition

1 Answers1