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

我有一个滑块改变我的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; } 

 
 
 Color Opacity  50  

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; } 

  
 Color Opacity  
50
 
 
 

Answer 2

首先，替换

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

同

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

而不是使用$(this).val()

看它工作