2013-02-16 3 views
1

Я пытаюсь реализовать и настроить немного поведение инструментов jquery scrollable plugin. Я хочу вызвать функцию перед тем, как сдвинуть к следующему пункту, в ожидании завершения функции и затем перейти к следующему элементу.JQuery Tools Прокрутка функции onBeforeSeek, а затем переход к следующему

Я опробовал функцию onBeforeSeek от апи, но, к сожалению, вызывает мою нужную функцию (например, f.ex. SetTimeout) и не ждать его, чтобы закончить, он сразу сползает к следующему пункту.

Есть ли у кого-нибудь идеи, как я могу предотвратить переход к следующему пункту до завершения функции? Это не должно происходить абсолютно через onBeforeSeek, но мне показалось, что это нормально, потому что он суммирует результат нескольких событий, которые вызывают предыдущий/следующий.

наценки:

<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 

} 

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

Как ни странно, в скрипку, соединяющей к апи делает перерыв слайдер ...

Любые предложения могут Помогите. Благодаря! Микаэль

ответ

0

EDIT

Таким образом, в основном то, что вы хотите достичь, чтобы приостановить onBeforeSeek событие, делать вещи, а затем запустите его снова. Для этого вы можете использовать некоторые jquery-плагины (просто google для "jquery event pause resume"), один из них можно найти 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; 
}); 

Надеюсь, это поможет.

+0

Это то же самое, что подключение к api с помощью api.onBeforeSeek (function() {...}) ' Это не помогает мне, извините. Как описано, я хочу вызвать функцию, когда я нажимаю на следующую кнопку, и когда эта функция завершается, перейдите к следующему элементу. – MichaelKaeser

+0

, пожалуйста, проверьте обновленную скрипку. Вы пропустили скользящую скобу. http://jsfiddle.net/zhDGC/17/ – iurii

+0

Это работает только для функции оповещения. Все действия блокируются при возникновении предупреждения. Но проверьте то же самое, например, с анимацией: http://jsfiddle.net/zhDGC/18/, она не дожидалась завершения анимации, чтобы перейти к следующему элементу ... – MichaelKaeser