jquery - 更改两个不同元素的值的 Jquery UI 滑块

Question

我有一组 jquery 滑块设置，可以改变图像不同层的不透明度。我试图弄清楚如何使用它，以便一个滑块会改变两个 div 的不透明度，但方向相反。因此，当一个人的价值向 0% 移动时，另一个人正在向 100% 移动。

我已经这样设置了，但我不确定如何修改它：

$('#slider3').slider({ 
    min: 0, 
    max: 1, 
    step: 0.01, 
    value: 1,
    orientation: "horizontal",
    slide: function(e,ui){
                 $('#nebula').css('opacity', ui.value)

         }                
    });

非常感谢任何可以帮助我的人。

Answer 1

听起来您只需要使用1 - ui.value其他图像不透明度即可。例如，如果您的其他图像的 id 为inverse：

$('#slider3').slider({ 
    min: 0, 
    max: 1, 
    step: 0.01, 
    value: 1,
    orientation: "horizontal",
    slide: function(e,ui){
        var val = ui.value;
        $('#nebula').css('opacity', val);
        $('#inverse').css('opacity', 1 - val);
    }                
});