javascript - 将一个 jQuery Easing 插件动画分成两个(左 + 右)？

Question

我有这段代码，其中 jQuery Easing plugin用于在推荐书之间切换。

此代码可在此处查看(转到推荐部分):http://jsfiddle.net/ahmadka/3hkwz/

当您打开推荐部分时，您会在底部看到 2 个按钮，用于在推荐之间向左(称为 prev)和向右(称为 next)切换。

代码有效，但它使用相同的 scrollLeftEasing 动画来向左和向右移动。我想更新代码，以便在单击 prev 时，使用的动画应该是 scrollRight，而不是 scrollLeft ..

相同的 JavaScript 用于将 prev 和 next 的点击链接到相同的 Easing 动画代码:

$('.scrollable4 .items').cycle({
    fx: 'scrollRight',
    speed:700,
    timeout: 0,
    next: '.next',
    prev: '.prev',
    easing: 'easeInOutBack',
})

我如何拆分它们？

此外，还有一个附加的 JavaScript 资源文件，其中包含一些相关代码:

消除这个:http://www.jenierteas.com/templates/default/js/jquery.cycle.all.2.74.pack.js

然后转到第 118 行，你会看到这个片段:

case "prev":
case "next":
    var u = i(q).data("cycle.opts");
    if (!u) {
        f('options not found, "prev/next" ignored');
        return false
    }
    i.fn.cycle[t](u);
    return false;

有人可以帮我吗？我很困惑..

Answer 1

您可以将 fx 转换更改为 scrollHorz，它会自动处理正确的方向。

代码:

$('.scrollable4 .items').cycle({
    fx: 'scrollHorz',
    speed:700,
    timeout: 0,
    next: '.next',
    prev: '.prev',
    easing: 'easeInOutBack'
})

演示:http://jsfiddle.net/IrvinDominin/TE9Bq/