使用滑块来实现div的不透明度

Question

我有一个滑块改变我的div的不透明度值有点麻烦。 这是我一直在使用的小提琴： https ： //jsfiddle.net/yfmLk1ad/1/

 $('#bgopacity').on('slide', function(value) { $('.background-color').css({ opacity: value * '.01' }); }); 

 .background-color { width: 500px; height: 500px; background: red; opacity: .5; } 

 <div class="background-color"></div> <form> <label>Color Opacity</label> <input type="range" name="bgopacity" id="bgopacity" value="50" min="0" max="100" step="1" onchange="rangevalue.value=value"> <output id="rangevalue">50</output> </form> 

Answer 1

你必须利用change事件。 并且像这样获取滑块的值($(this).val() ，而不是作为参数传递。这样在完成选择值时更新矩形。

 // Opacity Slider $('#bgopacity').on('change', function (value) { $('.background-color').css({ opacity: $(this).val() * '.01' }); }); 

 .background-color { width: 500px; height: 500px; background: red; opacity: .5; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <label>Color Opacity</label> <input type="range" name="bgopacity" id="bgopacity" value="50" min="0" max="100" step="1" onchange="rangevalue.value=value"> <output id="rangevalue">50</output> </form> <div class="background-color"></div> 

---

对于实时更新，您可以使用input事件。 这个值在更改时会更新。

 // Opacity Slider $('#bgopacity').on('input', function (value) { $('.background-color').css({ opacity: $(this).val() * '.01' }); }); 

 .background-color { width: 500px; height: 500px; background: red; opacity: .5; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <label>Color Opacity</label> <input type="range" name="bgopacity" id="bgopacity" value="50" min="0" max="100" step="1" onchange="rangevalue.value=value"> <output id="rangevalue">50</output> </form> <div class="background-color"></div> 

Answer 2

首先，替换

$('#bgopacity').on('slide', function (){...});

同

$('#bgopacity').on('change', function (){..});  

取而代之的value使用$(this).val()

看它工作