Question

I’m trying to use the jquery slider to slide from 1-100 and set the opacity of 4 images on top of each other.

Here is my code so far: http://jsfiddle.net/AtaMQ/ which is currently broken

I thought I could update the line $('.node:lt(' + step + ')').opacity(ui.value -10); to lower the opacity of the top image -10 for every step along the slide bar, but this doesn’t work.

Should I be using transparency, or is this also incorrect?

Answer 1

Try this. You need to use .css('opacity',value) since there’s no .opacity() method, and the value should be a number between zero and one inclusive.

$('#slider').slider({
    min: 0,
    range: "max",
    max: 1,
    step: 0.01,
    slide: function(event, ui) {
        $('.node').removeClass('highlight');
        var step = Math.floor(ui.value + .5);
        $('.node').css('opacity', 1-ui.value); // from 1 to 0 instead of 0 to 1
    }
});