динамическое изменение jquery innerfade

Question

У меня есть небольшая форма настроек перехода рядом с некоторыми изображениями, которые я вращаю, используя jquery innerfade plugin. Я бы хотел, чтобы пользователь выбирал новый параметр перехода (т. Е. Тайм-аут), внутреннее изменение динамически обновляет параметр таймаута, чтобы пользователь мог просмотреть, как это будет выглядеть. Но я не уверен, что это лучший способ сделать это? возможно ли это без изменения сценария?

$('#foo').innerfade({ 
    timeout: $('#bar').val() 
}); 

мой текущий подход не работает. Я также попытался отключить innerfade от #foo, но это тоже не сработало, и скрипт не имеет функции удаления.

Как это сделать?

Answer 1

После игры с функцией больше я пробовал работать с функцией обратного вызова, которая работала и позволяла мне обновлять любые настройки, какие я хотел. Единственное падение я должен был дождаться, когда текущий fade/timeout закончится до появления новых настроек. Это не то, что я хотел использовать b/c, если есть длинный тайм-аут (т.е. 20 секунд), пользователю придется ждать, пока он истек, прежде чем они увидели свои новые обновления в предварительном просмотре. Проблема, с которой я столкнулся, заключалась в том, что у меня не было возможности очистить таймауты, которые были установлены, b/c их timeoutID никогда не устанавливается в исходном плагине. поэтому я изменил оригинальный сценарий, чтобы установить их, чтобы я мог получить доступ к ним, а затем вызвать функцию innerfade

в функции innerfade:

$.innerfade.startTimeout = setTimeout(function() { 
    $.innerfade.next(elements, settings); 
}, settings.timeout); 

в следующей функции:

$.innerfade.continueTimeout = setTimeout((function() { 
    $.innerfade.next(elements, settings); 
}), settings.timeout); 

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

$('#timeout').change(update); 

function update() 
{ 
    if (typeof($.innerfade.startTimeout) != 'undefined') { 
    clearTimeout($.innerfade.startTimeout); 
    } 

    if (typeof($.innerfade.continueTimeout) != 'undefined') { 
    clearTimeout($.innerfade.continueTimeout); 
    } 

    $('#container').innerfade({[opts]}); 
} 

Answer 2

Не знаю innerfade, но будет ли это работать с .empty() a div, обертывающий ваш предварительный просмотр и пополняющий его? В качестве последнего средства вы можете перезагрузить страницу или iframe, обернув предварительный просмотр. Ни одна из идей не прекрасна, но они не связаны с изменением плагина.

Answer 3

Вы можете заменить $.innerfade.next, который фактически устанавливает таймер, не изменяя плагин.

Например: (непроверенная)

$.innerfade.next = function(elements, settings) { 
    if (!$.data(settings.container, 'paused')) { 
     $.innerfade.animate(elements, settings); 
    } 

    if (settings.timeoutElem) 
     settings.timeout = settings.timeoutElem.val(); 

    setTimeout((function() { 
     $.innerfade.next(elements, settings); 
    }), settings.timeout); 
}; 


$('#foo').innerfade({ 
    timeout: $('#bar').val() 
    timeoutElem: $('#bar') 
}); 

Вам придется повторно проверить это каждый раз, когда плагин обновляется.