2014-03-31 3 views
1

jcarousel을 사용하여 슬라이드 쇼를 만들었으며 슬라이드가 슬라이드 쇼에서 전환 된 후에 텍스트를 애니메이션으로 적용하고 싶습니다. 그러면 슬라이드가 먼저 들어가고, 텍스트가 나중에 움직입니다.jcarousel에서 콜백을 사용하여 슬라이드 내에 텍스트 애니메이션을 배치하는 방법은 무엇입니까?

나는 콜백 기능을 사용하여 슬라이드가 '히트'할 때마다 텍스트 애니메이션을 발생시킬 수있는 방법을 찾으려고 노력 해왔다. 그러나 나는 아직 작동하지 않는 것을 발견하지 못했습니다.

내가하고 싶은 것은 여기에 설명 된 것과 유사하다는 : jQuery cycle for text animation on a slideshow

나는 'ScrollIntoView'플러그인을 사용하여 살펴본하지만 내가 무슨 의도하지 생각하지 않습니다.

아무에게도이를 달성 할 수있는 방법을 알고 있습니까?

많은 감사

답변

0

나는 targetintargetout 이벤트 리스너 함께 할 것입니다. jcarousel 이벤트에 대한 설명서 :

$('.jcarousel') 
    .on('jcarousel:targetin', 'li', function() { 
     // "this" refers to the item element 
     // "carousel" is the jCarousel instance 
     var $slide = $(this); 
     $slide.removeClass('active-slide'); 

     //sudo code, but put animations here 
     $slide.find('.text-effect-element').animate(); 
    }) 
    .on('jcarousel:targetout', 'li', function() { 
     // "this" refers to the item element 
     // "carousel" is the jCarousel instance 
     var $slide = $(this); 
     $slide.removeClass('active-slide'); 

     //sudo code, but put animations here 
     $slide.find('.text-effect-element').animate(); 
    }); 

또한 클래스에 CSS 애니메이션을 따라 사용할 수 있습니다 각 슬라이드 내부의 텍스트 요소가있는 경우 http://sorgalla.com/jcarousel/docs/reference/events.html

또한 visibleinvisibleout

예 설치를 시도 할 수 부모 슬라이드의

관련 문제