當-webkit-線性漸變jQuery的滑塊

TL添加-moz-線性漸變破; DR -webkit-線性梯度破萬盎司，線性梯度當-webkit-線性漸變jQuery的滑塊

請聽聽年代難題，我m使用帶有兩個手柄的Jquery Slider插件，我有一個漸變作爲背景顏色給外部範圍一些顏色。我想要做的是在滑塊移動時更新漸變的百分比。它適用於Chrome/Safari，但在使用-moz和-webkit標籤時不適用於Firefox。該值正從第一個滑塊的位置拉出。

當我只有-moz-linear-gradient標籤時它可以工作，但只要我爲Firefox添加-webkit-linear-gradient標籤就會中斷它。

下面的代碼

HTML：

<div id="traffic-allocation"> 
    <h4 id="traffic-allocation-hed">Traffic Allocation <small>Change by dragging handles right or left and applying changes</small></h4> 
    <div class="slideContainer"> 
     <div id="slider-direct" class="slider"></div> 
    </div> 
</div> 

<div class="labelBox"> 
    <div class="control-box" id="control-box-direct"> 
     <input id="control-direct" type="text" value="35%" class="allocation-control" /> 
     <div class='allocation-control-wrapper'> 
      <h4 class="variantLabel mycontrol-label" id="mycontrol-label-direct">Control: </h4> 
     </div> 
    </div> 
</div>

的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/

預先感謝您:)

來源

2012-08-30 Drew Landgrave

我修改了小提琴。而不是多個背景屬性，你需要有多個CSS調用。試試這個：http://jsfiddle.net/bep9A/1/

來源

2012-08-30 17:11:05 user1512616

謝謝你:) –

@DrewLandgrave它仍然不會工作，因爲我在我的答案中描述的原因相同。 – Pointy

@Pointy我正在使用Firefox和小提琴的作品。它類似於http://css-tricks.com/moving-highlight/ – user1512616

只能設置一個值，任何單一的樣式屬性在給定的元素上。你得到的是你在CSS文件中做什麼，但這不是.css()方法所做的。它直接影響每個受影響的DOM元素上的style對象的屬性。因此，當你設置「-moz-linear-gradient」時，你正在消除「線性漸變」，並且當你設置爲消除簡單的顏色設置時。

通過類或其他方式在CSS中設置您的樣式，然後在JavaScript中設置類，當你想選擇一個或另一個設置。

來源

2012-08-30 16:25:33 Pointy

這也是一個很好的答案 –

當-webkit-線性漸變jQuery的滑塊

回答

相關問題