Question

我正在做一个特殊的旋转木马，它有：

内容
下一步按钮
上一页按钮

功能如下：

当您将鼠标悬停在下一个或上一个位置时，它会向按钮方向移动20px内容。
当您点击按钮时，轮播会启动动画。

目前的代码很粗鲁，充满了if控件以防止动画，队列等......但它目前似乎工作正常。

我正在使用 jCarousel 作为插件， jQuery easing 。

我为你准备了 JsFiddle 。

BUG ：

它有一个错误。如果您将鼠标悬停在下一个按钮上（将鼠标指针悬停在下一个按钮上），请单击一次，始终保持悬停而不从按钮出来，再单击一次。图像未对齐。

这是因为在动画之后它不再识别出处于悬停状态。

我该如何解决？

Answer 1

所以我编辑了你的小提琴，我希望这是你期望的行为。它也不像你的第一个版本那样“跳跃”。

我创建了三个新变量：

var hovered    = false;
var animating  = false;
var correction = null;

第一个存储元素中的一个是否悬停，第二个存储动画是否正在运行以及第三个存储，必须使用哪个校正（左侧或侧面）。

我已经更新了功能以跟踪发生的事情：

$carouselNext.hover(function () {
    if (!animating)
        shunt('-=20');
    hovered = true;
    correction = 'next';
}, function () {
    if (!animating)
        shunt('+=20');
    hovered = false;
    correction = 'next';
});

比我更新了click-hanlder：

$carouselNext.bind('click', function(e) {
    move(0);
    e.preventDefault();
});

move() - 函数：

function move(dir, par) {
    if(!animating) {
        animating = true;
        if(dir == 0) {
            carousel.next();
        } else {
            carousel.prev();
        }
        setTimeout(function() {
            shunt( ( hovered ? '+=0' : ( 'next' == correction ? '+' : '-' ) + '=20' ) );
            animating = false;
        }, 1700);
    }
}

这是演示 - 希望你能得到我更新的所有内容。

样本

jsfiddle

注意：从一开始的变量可以在function carousel_initCallback(carousel)内声明 - 不知何故它没有存储在小提琴中......

Answer 2

将z-index设置为10或其他内容作为您的下一个按钮，它将始终位于顶部，也是您添加图片的部分，只是为了安全地将z-index添加到0或1好。

jQuery，在动画之后徘徊

2 个答案:

样本