jquery - 绑定 jquery 滑块以在 3 个图像之间淡入淡出？

Question

我正在尝试创建一个允许在 3 个图像之间淡入淡出的 jquery 滑块？

我试图创建的最终效果是拍摄 3 张相同的图像，一张清晰，一张应用了一些模糊，另一张应用了一些模糊到图像的不同区域。在滑块上使用 0-200 的值，当用户从 0-100 拖动滑块时，它会在图像 1 和 2 之间渐变。当用户从 101-200 拖动滑块时，它会在图像 2-3 之间渐变。

我已经把一些东西放在一起，只是在前两张图片之间出现了淡入淡出，但我认为我这样做完全是错误的。

简单的 HTML：

<div id="fader1">
    <img src="http://egegorgulu.com/assets/img/beforeafter/after.jpg">
    <img src="http://egegorgulu.com/assets/img/beforeafter/before.jpg">
    <img src="http://egegorgulu.com/assets/img/beforeafter/after.jpg">
</div>

JS：

$("#slider").slider({
   value:100,
   min: 0,
   max: 100,
   slide: function( event, ui ) {
       $( "#slider-value" ).html( ui.value );
       fader2.setPanelOpacity(0,ui.value / 100 );
       }
   });

Fader.prototype.setPanelOpacity = function(index, opacity){
  if (isNaN(opacity)) opacity = 0;
  opacity = Math.max(0, Math.min(1, opacity));
  this.panels[index].opacity = opacity;
  if (this.useOpacity){
    this.panels[index].node.style.opacity = opacity;
  }else{
    this.panels[index].node.style.filter  =
        'alpha(opacity=' + (100 * opacity) + ')';
  }
}

JsFiddle：http: //jsfiddle.net/m0qrapk9/3/

标签： jquery