jQuery .css() и градиенты

Question

Я рассмотрел несколько вопросов, но я не могу заставить работать .css() с переменными и градиентом, которые я хочу. Вы должны иметь возможность отбрасывать два цвета во входы, а BANG дает вам градиент, но без кубиков. Какие-либо предложения?

Ниже мой JQ:

$(document).ready(function() { 
var colorTop = $("#color1").keyup(function() { 
    var color1 = $("#color1").val(); 
    $("#demo").css("background", color1); 
}); 

var colorBottom = $("#color2").keyup(function() { 
    var color2 = $("#color2").val(); 
    $("#demo").css("background", color2); 
}); 

function changeGradient(colorTop, colorBottom) { 
    $("#demo").css({ 
     background: 'linear-gradient(' + colorTop + ', ' + colorBottom + ')' 
    }); 
}; 
}); 

https://jsfiddle.net/xyhjppph/3/

Answer 1

Вы не вызывая changeGradient везде. Я предлагаю добавить кнопку, которая будет принимать выходные данные обоих входов при нажатии, чтобы изменить фон.

Как это https://jsfiddle.net/jyh18cnk/1/

Или, если вы не хотите кнопку, вы могли бы сделать переменные для цветов глобальных

Как это https://jsfiddle.net/ao0escev/1/