응답 슬라이더 - 내 테스트 서버에서 응답 슬라이더를 구현 한

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

, 당신은 페이드로을받지 않습니다. 노드가 사라지면 불투명 함이 사라집니다. 선형 페이드에서는 절반의 방법으로 두 노드가 반투명합니다. 하나는 50 % + 50 %가 100 %로 합쳐져 완전히 불투명 한 이미지가 50-50으로 혼합된다고 가정 할 것입니다. 그러나 이것은 오렌지가 아닌 가볍습니다. 그렇게 합치지는 않습니다. 빛은 다음과 같이이다 :

opacity = layerA + (layerB * layerA) 

당신이 될 겁니다 것은 75 %의 불투명도이며, 그 배경이 페이드의 미들 아래에서 침투하는 나머지 25 %를 잎거야. 그것이 크로스 페이드가하는 것입니다. 확장 된 추론을 위해이 멋진 question and its answer(s)을 참조하십시오.

100 % 불투명도로 부드럽게 전환하려면 다른 기술이 필요합니다. 이전에는 새로운 슬라이드를 페이드 인시켜야하는데, 전혀 사라지지 않습니다. 100 %에 머물러있어 배경에 기회가 없습니다. 다음 슬라이드가 페이드 인되면 이전 슬라이드를 숨 깁니다. 대신이의 일반적

는 :

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