Непрозрачность перехода между 3 изображениями с помощью слайда

У меня есть три изображения, расположенные друг над другом, а под ними слайд jQuery. Я хочу, чтобы непрозрачность изображения менялась так, чтобы при скольжении слева направо изображения плавно исчезали/исчезали в следующем порядке:

Сдвиньте в крайнее левое положение. изображение 1 с непрозрачностью 100% изображение 2 с 0 изображением 3 с 0

Скользите посередине. изображение 1 в 0 изображение 2 в 100 изображение 3 в 0

Слайд в крайнем правом углу изображения 1 в 0 изображений 2 в 0 изображений 3 в 100%

У меня есть настройка Fiddle по адресу http://jsfiddle.net/greggbanse/PWc6m/. Я знаю код неправильно, но я мог бы использовать несколько советов о том, как лучше всего это выполнить. ТИА.

    $(function() {
        $( "#slider" ).slider({

        range: "min",
            value: 0,
            min: 0,
            max: 100,

            slide: function (event, ui) {
                var r = (ui.value); 
                $("#img1,#txt1").css({'opacity':r/100});
                $("#img2,#txt2").css({'opacity':1-(r/100)});
                $("#img3,#txt3").css({'opacity':2-(r/100)});
            }   
        })
    });

HTML

<img id="img1" src="http://www.norwich.edu/wp-content/uploads/home_oral_history.jpg" style="position:absolute;left:0;z-index:3000;">
<div id="txt1" style="position:absolute;left:0;z-index:3000;top:160px;background-color:#fff;">This is the text for the first image.</div>
<img id="img2" src="http://www.norwich.edu/wp-content/uploads/2013/12/condoleezza-rice.jpg" style="position:absolute;left:0;z-index:2000;">
<div id="txt2" style="position:absolute;left:0;z-index:2000;top:160px;background-color:#fff;">More text but this is the explanation text for the second image.</div>
<img id="img3" src="http://www.norwich.edu/wp-content/uploads/2014/05/CGCSresidency.jpg" style="position:absolute;left:0;z-index:1000;">
<div id="txt3" style="position:absolute;left:0;z-index:1000;top:160px;background-color:#fff;">And now we have yet more text for the third and final image.</div>
<div id="slider" style="height:10px; width:400px; position:relative;top:240px;"></div>

transition jquery css opacity jquery-ui-slider
person GreggBanse    schedule 16.06.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я немного подправил ваши формулы:

$("#img1,#txt1").css({'opacity':1-(r*0.02)});
$("#img2,#txt2").css({'opacity':r*0.02+Math.floor((1-r*0.02))*(r-50)*0.04});
$("#img3,#txt3").css({'opacity':(r*0.02)-1});

Вот демонстрация.

Насколько я понимаю, это то, чего вы пытались достичь, но подходит ли это вашему делу?

person Hristo Valkanov    schedule 16.06.2014