Инструменты JQuery Прокручивайте функцию onBeforeSeek, а затем переходите к следующему

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

Я попробовал функцию onBeforeSeek из api, но, к сожалению, она вызывает мою желаемую функцию (например, 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/

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

Любые предложения могут помочь. Спасибо! Майкл


javascript slider jquery scrollable
person MichaelKaeser    schedule 16.02.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

РЕДАКТИРОВАТЬ

Итак, в основном то, чего вы хотите достичь, - это приостановить событие onBeforeSeek, выполнить свои действия, а затем запустить его снова. Для этой цели вы можете использовать некоторые плагины jquery (просто google для "jquery event pause resume"), один из них можно найти здесь.

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

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;
});

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

person iurii    schedule 07.03.2013
comment
это то же самое, что подключение к api с api.onBeforeSeek(function(){...}) Это мне не помогает, извините. Как описано, я хочу вызвать функцию, когда я нажимаю кнопку «Далее», и когда эта функция завершается, переходите к следующему элементу. - person MichaelKaeser; 08.03.2013
comment
пожалуйста, проверьте обновленную скрипку. Вы пропустили замыкающую скобку. jsfiddle.net/zhDGC/17 - person iurii; 09.03.2013
comment
Это работает только для функции оповещения. При появлении предупреждения все действия блокируются. Но проверьте то же самое, например, с анимацией: jsfiddle.net/zhDGC/18, это не так. не дожидаюсь завершения анимации, чтобы перейти к следующему элементу ... - person MichaelKaeser; 10.03.2013