Question

我在使用jquery innerfade plugin旋转的一些图像旁边有一个小形式的过渡设置。我想要的是当用户选择新的转换设置（即超时）时，内部趋势会动态更新超时设置，以便用户可以预览此更改的外观。但我不确定最好的方法吗？是不是可以不改变剧本？

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

我目前的做法不起作用。我也试过从#foo中取消绑定内部淡化，但这也不起作用，脚本没有删除功能。

我该如何做到这一点？

Answer 1

您可以替换实际设置计时器的$.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')
});

每次更新插件时都必须重新测试。

Answer 2

我不知道innerfade，但它是否适用于.empty() div包装预览并重新填充？作为最后的手段，您可以重新加载页面或包含预览的iframe。这些想法都不可思议，但它们并不涉及改变插件。

Answer 3

在玩了更多功能后，我尝试使用回调功能 - 这确实有效，并允许我按照我的意愿更新任何设置。唯一的缺点是我必须等待当前的淡入淡出/超时才能完成新的设置。这不是我想要的b / c如果有一个很长的超时（即20秒），用户必须等到它过期才能在预览中看到他们的新更新。我遇到的问题是，我无法清除正在设置的超时，b / c他们的timeoutID从未在原始插件中设置。所以我修改了原始脚本来设置它们，以便我可以访问它们然后调用内部淡入淡出函数

内部函数中的

：

$.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]});
}

动态更改jquery innerfade

3 个答案: