2

我已经使用 css 构建了一个旋转轮播。轮播由“ul”标签构成。在向左/向右导航时，我在列表的左侧或右侧添加一个“li”（克隆相关值并附加/附加它）。然后我正在更正“ul”的左值并使用动画的 css 过渡移动“ul”。这用于通过动画实现无尽的导航效果。
该动画非常适合“下一个”导航，但无法在“后退”上工作。对我来说最令人困惑的部分是，在调试“返回”代码时，动画确实有效！（也许这是一个时间问题，但是，为什么“下一个”有效？？？）

该问题的演示在这里：jsfiddle

请注意：这不是我的真实代码。真正的代码封装在一个面向对象风格的插件中，对用户快速向前和向后单击等情况进行验证，并使用 jQuery 'animate' 为 ie 提供一个 polyfill。我也确实考虑过使用现成的插件，但要求不符合我发现的要求......

4

1 回答 1

0

这个问题让我有些困惑。在中间（addClass呼叫周围）添加警报时，它似乎有点工作。这可能与浏览器的 DOM 更新时间有关，至少对我来说，这是一个巨大的兼容性危险信号。

既然您仍然依赖 jQuery ，我建议您改用 jQuery 动画。代码更小，功能受支持，并且可以在 CSS3 之前的浏览器中运行。我已经模拟了一个小提琴，基于你的，它完全符合你对自己的期望，只是使用它.animate()。

请注意，我使用了swingjQuery 缓动；如果你想要更多的缓动类型（就像ease-in-out你在 CSS 中的那样），试试jQuery easing plugin。

使用的代码（在.prev按钮上）：

$('.prev').on('click', function() {
    var $childelement = $('ul');
    $childelement.children('li').last().clone().prependTo($childelement);
    $childelement.css({
        'left': '-150px'
    }).animate({ 'left': '-50px' }, 400, "swing", function() {
        console.log('transition ended');
        $childelement.children('li').last().remove();
    });
});​
于 2012-10-07T06:27:33.443 回答