使用滑块控制div的不透明度

Question

我在用滑块改变div的透明度时遇到了一点麻烦。以下是我正在使用的jsfiddle链接：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>

- DRB

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>

- adricadar

Answer 2

首先，替换

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

使用

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

使用 $(this).val() 代替 value

查看 演示

- AmmarCSE