Question

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

此处可以看到此代码（转到“推荐”部分）：http://jsfiddle.net/ahmadka/3hkwz/

当您打开推荐书部分时，您会在底部看到2个按钮，用于左侧切换（称为prev），右侧（称为next）位于推荐书之间。

代码有效，但它使用相同的scrollLeft Easing动画来左右移动。我想更新代码，以便在点击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/

将一个jQuery Easing插件动画分成两部分（左+右）？

1 个答案: