2013-09-05 1 views
2

나는이 코드를 사용하여 jQuery Easing plugin이 사용 후기를 전환하는 데 사용됩니다.하나의 jQuery Easing 플러그인 애니메이션을 두 개 (왼쪽 + 오른쪽)로 분리 하시겠습니까?

여기에서 볼 수있는이 코드는 (스토리 섹션으로 이동)

: 당신은 스토리 섹션을 열 때 왼쪽 스위치 (prev라고 함)과 오른쪽의 하단에 버튼 2 개를 볼 수 있습니다 http://jsfiddle.net/ahmadka/3hkwz/

(라고 next)를 말합니다.

코드는 작동하지만 동일하게 사용합니다. scrollLeft 왼쪽 및 오른쪽으로 모두 이동하는 애니메이션입니다. 나는

같은 자바 스크립트

이 같은 이징 애니메이션 코드를 모두 prevnext의 클릭을 연결하는 데 사용됩니다 .. 클릭하면 prev, 사용되는 애니메이션이 scrollRight하지 scrollLeft해야한다 있도록 코드를 업데이트 할 :

$('.scrollable4 .items').cycle({ 
    fx: 'scrollRight', 
    speed:700, 
    timeout: 0, 
    next: '.next', 
    prev: '.prev', 
    easing: 'easeInOutBack', 
}) 

어떻게 분할합니까?

또한, 일부 관련 코드가 포함 된 첨부 자바 스크립트 리소스 파일이 :

Deminify이 : http://www.jenierteas.com/templates/default/js/jquery.cycle.all.2.74.pack.js 다음

118 라인으로 이동하고,이 조각 볼 수 있습니다 :

case "prev": 
case "next": 
    var u = i(q).data("cycle.opts"); 
    if (!u) { 
     f('options not found, "prev/next" ignored'); 
     return false 
    } 
    i.fn.cycle[t](u); 
    return false; 

누군가 나를 도와 줄 수 있습니까? 나는 당황 스럽다.

답변

2

fx 전환을 scrollHorz으로 변경하면 자동으로 올바른 방향을 처리 할 수 ​​있습니다.

코드 :

$('.scrollable4 .items').cycle({ 
    fx: 'scrollHorz', 
    speed:700, 
    timeout: 0, 
    next: '.next', 
    prev: '.prev', 
    easing: 'easeInOutBack' 
}) 

데모 : http://jsfiddle.net/IrvinDominin/TE9Bq/

+0

감사합니다! 나는 그것이 그렇게 쉽게 될 것이라고 생각하지 않았다! – Ahmad

+0

@Ahmad 기꺼이 도와 드리겠습니다. 다행스럽게도 easing 라이브러리는 꽤 많은 효과가 있습니다! –