Jquery 도구 OnBeforeSeek 함수를 스크롤하고 다음 슬라이드로 이동

Question

jquery 도구 스크롤 가능 플러그인의 동작을 약간 구현하고 사용자 정의하려고합니다. 내가 원하는 것은 함수를을 완료하기를 기다리는 을 기다리고 다음 항목으로 밀어 넣기 바로 전에을 밀어 넣기 전에 함수를 호출하는 것입니다.

내가는 API에서 onBeforeSeek 기능을 시도하지만, 불행하게도 (f.ex.에서는 setTimeout처럼) 내 원하는 기능을 호출하고 완료 될 때까지, 즉시 다음 항목으로 슬라이드 기다리지 않습니다.

기능이 완료 될 때까지 다음 항목으로 넘어 가지 않도록 어떻게 생각합니까? 그것은 onBeforeSeek을 절대적으로 두드러지게 할 필요는 없지만, 그것은 prev/next를 트리거하는 몇 가지 이벤트의 결과를 요약하기 때문에 나에게 좋았다.

마크 업 :

<section> 
    <div> 
     <dl> 
      <dt>titre 1</dt> 
      <dd><img src="http://placehold.it/350x150"></dd> 
     </dl> 
     <dl> 
      <dt>titre 2</dt> 
      <dd><img src="http://placehold.it/350x150"></dd> 
     </dl> 
     <dl> 
      <dt>titre 3</dt> 
      <dd><img src="http://placehold.it/350x150"></dd> 
     </dl> 
    </div> 
</section> 

<!-- navigation (cubes) --> 
<div class="navi"></div> 
<br style="clear: both;"> 

<!-- navigation prev/next --> 
<a class="prev browse left">prev</a> | <a class="next browse right">next</a> 

JS :

$('section').css('overflow', 'hidden'); 

$('section').scrollable({ circular: true }).navigator(); 

var api = $('section').data("scrollable");//get access to the api functions 

api.onBeforeSeek(function(){ 

    //do something and after this start sliding to the next img 

} 

API에 연결하는 바이올린에 이상하게

http://jsfiddle.net/micka/zhDGC/

슬라이더 휴식을 만드는 ...

어떤 제안 할 수 도움. 감사! 의 Michaël

Answer 1

편집

그래서, 기본적으로 당신이 달성하고자하는의 onBeforeSeek 이벤트를 일시 정지 물건을 후 다시 발사하는 것입니다. 이 목적을 위해 일부 jquery 플러그인 (단순히 "jquery event pause resume"용 google)을 사용할 수 있습니다. 그 중 하나는 here입니다.

플러그인을 사용하고 싶지 않거나 이벤트를 처리하지 않으려면 fiddle에서 내 솔루션을 사용할 수 있습니다. 이벤트를 동결 한 다음 다시 시작하는 대신 처음으로 이벤트를 취소하고 애니메이션을 수행하고 완료 상태를 변경 한 다음 다시 이벤트를 취소하지만 이번에는 이벤트 취소없이 이벤트를 취소합니다.

var event_pos_list = [false, false, false]; 

api.onBeforeSeek(function(event, pos){ 
    // if the animation is not done - do it and skip the scroll 
    if(!event_pos_list[pos]){ 
     event.preventDefault(); 
     $('span').animate({marginLeft: (pos*50) + 'px'}, 2000, function(){ 
      // do the scroll, this time the animation is completed 
      event_pos_list[pos] = true; 
      api.seekTo(pos); 
     }); 
    } 
}); 
api.onSeek(function(event, pos){ 
    // after the scroll is done, reset the event_pos_list 
    event_pos_list[pos] = false; 
}); 

희망이 도움이됩니다.