応答スライダー - 私は私のテストサーバー上で応答スライダーを実装している

Question

スライド画像の間でフェードするとき、背景にフェードしませ方法： http://test-orange.com/resp/

スライドショーを見た場合、各スライドをフェードアウトとして、あなたはそれを参照してくださいよ次はフェードインし、フェード中に背景が表示されます。

私はこのような背景を表示したくありません。私は、各スライド画像を次の画像に無用に退色させたい。

これを行うためにresponsiveslides.jsコードをどのように変更できますか？ 私はこれを編集する必要が一部だと思う：

 if (settings.auto === true) { 
     setInterval(function() { 
      $this.find(':first-child').fadeOut(fadetime, function() { 
      $(this).css(hidden); 
      }).next($slide).fadeIn(fadetime, function() { 
      $(this).css(visible); 
      }).end().appendTo($this); 
     }, parseFloat(settings.speed)); 

Answer 1

あなたがシームレスフェードをしたい場合、あなたはフェードでそれを得ることはありません。ノードがフェードすると、不透明度が失われます。リニアフェードでは、途中で両方のノードが半不透明です。 1人は50％+ 50％が100％になり、完全に不透明なイメージが50％混じっていると仮定しますが、これはオレンジではなく軽いです。そういうわけではありません。光で、それはこのようなものです：

opacity = layerA + (layerB * layerA) 

あなたがになってしまいますどのような75％の不透明度で、それはフェードの途中で下から通じ浸透する背景で、残りの25％を残しものです。それがクロスフェードの役割です。拡張された推論のために、この素​​敵なquestion and its answer(s)を見てください。

フルタイムの100％不透明度を達成するには、別の手法が必要です。新しいスライドをフェードインする必要があります。これはまったくフェードしません。それは100％にとどまり、このように背景にはチャンスがありません。次のスライドがフェードインすると、前のスライドが隠されます。これに代えて一般

、：

$previous.fadeOut(fadetime); 
$next.fadeIn(fadetime); 

あなたはこれを必要とする：

$next.fadeIn(fadetime, function(){ 
    $previous.hide(); 
});