Блог

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

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

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

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

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

     $(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>
  

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

 $("#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});
  

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

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