jQuery에서 여유를 페이딩으로 변경하는 방법

Question

나는 그림 슬라이드를 만들 때 jQuery Tools scrollable을 사용하고 있습니다. easing 대신 페이드 ​​인/페이드 인 애니메이션을 사용자 정의하는 방법이 있습니까?

새 플러그인을 사용하기 전에 전환을 쉽게 변경할 수있는 방법이 없는지 확인하고 싶습니다. 여러 섹션에서 플러그인을 통합했으며 새 플러그인을 사용하는 대신 플러그인을 확장하는 것을 선호합니다.

저자는 기능을 완화 정의를 제공,하지만 난 방법을 만드는 방법이 퇴색 아무 생각이 :

// custom easing called "custom" 
$.easing.custom = function (x, t, b, c, d) { 
    var s = 1.70158; 
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; 
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; 
} 
// use the custom easing 
$("div.scrollable").scrollable({easing: 'custom', speed: 700, circular: true}); 

Answer 1

가 이징 기능은 단지 값이 A에서 B로, 그것은 '할 수있는 이동하는 모양을 정의 명시 적으로 페이드 인 또는 페이드 아웃합니다. 이 라이브러리를 사용하면들을 수있는 이벤트가 있습니다. onBeforeSeek에서 페이드 아웃 한 다음 here으로 표시된 onSeek 이벤트를 다시 페이드 인 할 수 있습니다.

항목에 대한 컨테이너 아이디 = '항목을'이있는 경우 : 그것은 어떤 식 으로든 움직임을 애니메이션 아니에요 있도록

$(".scrollable").scrollable({ 
    onBeforeSeek: function (e,i) { 
     $("#items").fadeOut(); 
    }, 
    onSeek: function (e,i) { 
     $("#items").fadeIn(); 
    } 
}); 

Answer 2

은 첫째로 당신은 speed: 0을 설정해야합니다.

그런 다음 함수가 DOM을 매번 검색하지 않도록 .items 래퍼를 캐시합니다.

'fadeIn/Out 대신 실제로 .fadeTo()을 사용합니다. 실제로 수행하고자하는 것은 display:property이 아니라 불투명도를 변경하기를 원하기 때문입니다. 의 jQuery 문서를 참조하십시오 : .fadeTo()

당신은 어느 이벤트 e 인덱스 i 인수를 전달 할 필요가 없습니다 :

var $items = $('.scrollable .items'); 

$(".scrollable").scrollable({ 
    speed: 0,    
    onBeforeSeek: function() { 
     $items.fadeTo(0,0); 
    }, 
    onSeek: function() { 
     $items.fadeTo('fast',1); 
    } 
)};