在JQuery Slider上添加-webkit-linear-gradient时，-moz-linear-gradient break
TL; DR -webkit-linear-gradient正在破坏-moz-linear-gradient
所以听到这个难题，我正在使用带有两个手柄的Jquery Slider插件，我有一个渐变作为背景颜色，以给外部范围一些颜色。 我想要做的是在滑块移动时更新渐变的百分比。 它适用于Chrome / Safari，但在使用-moz和-webkit标记时不适用于Firefox。 该值是从第一个滑块的位置拉出的。
当我只有-moz-linear-gradient标签时，它可以工作，但是只要我添加-webkit-linear-gradient标签就会中断Firefox。
这是代码
HTML：
Traffic Allocation Change by dragging handles right or left and applying changes
Control:
JavaScript的：
$(function() { $( '.slider' ).slider({ range: true, values: [35, 70], min: 0, max: 100, step: 5, slide: function( e, ui ) { //Derive calling (class selector) element's ID and set the IDs for its "companion" value displays: theSegment = e.target.id.slice(7); theControl = '#control-' + theSegment; $( theControl ).val( ui.values[ 0 ] + '%' ); var slidercolor = $('#control-direct').val(); $('.ui-slider-horizontal').css({ background: '#0e76bc', /* Old browsers */ background: 'linear-gradient(to right, #0e76bc '+slidercolor+',#e78f08 '+slidercolor+')' ,/* W3C */ background: '-moz-linear-gradient(left, #0e76bc '+slidercolor+', #e78f08 '+slidercolor+')', /* FF3.6+ */ background: '-webkit-linear-gradient(left, #0e76bc '+slidercolor+',#e78f08 '+slidercolor+')' /* Chrome10+,Safari5.1+ */ }) } });
CSS：
h1 { font-family: Helvetica, Arial; font-weight: bold; font-size: 18px; } body, p{ font-family: Helvetica, Arial; } .ui-slider-horizontal{ background: '#0e76bc', /* Old browsers */ background: linear-gradient(to right, #0e76bc 50%,#e78f08 50%); /* W3C * background: -moz-linear-gradient(left, #0e76bc 50%, #e78f08 50%); /* FF3.6+ */ background: -webkit-linear-gradient(left, #0e76bc 50%,#e78f08 50%); /* Chrome10+,Safari5.1+ */ } .ui-widget-header { background: none repeat scroll 0 0 #292668; border: 1px solid #CCCCCC; color: #292668; font-weight: bold; }
这是一个链接，看看发生了什么，而css因为它有很多:)。 （在chrome / safari中打开，看看它应该做什么，firefox看它坏了）
http://jsfiddle.net/DrewLandgrave/bep9A/
先感谢您 ：）
我修改了小提琴。 您需要有多个css调用，而不是多个背景属性。 试试这个： http ： //jsfiddle.net/bep9A/1/
您只能为给定元素上的任何单个样式属性设置一个值。 你得到的是你在CSS文件中所做的，但这不是.css()方法的作用。 它直接在每个受影响的DOM元素上搞乱style对象的属性。 因此，当您设置“-moz-linear-gradient”时，您将消除“线性渐变”，并在设置时消除简单的颜色设置。
通过类或其他东西在CSS中设置样式，然后在JavaScript中设置要在一个或另一个设置中选择的类。