Control deslizante Jquery UI que cambia los valores de dos elementos diferentes

Tengo un grupo de configuraciones de controles deslizantes jquery que cambian la opacidad de diferentes capas de una imagen. Estoy tratando de descubrir cómo tenerlo para que un control deslizante cambie la opacidad de dos divs, pero en direcciones opuestas. Entonces, mientras el valor de uno se mueve hacia el 0%, el otro se mueve hacia el 100%.

Lo tengo configurado así, pero no estoy muy seguro de cómo modificarlo:

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

         }                
    });

MUCHAS GRACIAS de antemano a quien me pueda ayudar con esto.

preguntado el 21 de mayo de 12 a las 19:05

1 Respuestas

Parece que solo necesitas usar 1 - ui.value para la otra opacidad de la imagen. Por ejemplo, si su otra imagen tuviera una identificación de 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);
    }                
});

contestado el 21 de mayo de 12 a las 19:05

wow, eso es exactamente lo que estaba buscando, es fantástico que fuera tan simple. Básicamente, de la forma en que lo tenía antes, solo podía hacer que las cosas se movieran en una dirección. Muchas gracias. - loriensleafs

@loriensleafs increíble! ¡Eres bienvenido! Limpiaré un poco mi respuesta si tiene la amabilidad de marcar esta respuesta como correcta :) - lbstr

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.