jquery - jQuery，动画后悬停

Question

我正在做一个特定的轮播，它有：

• 内容
• 下一步按钮
• 上一个按钮

功能是：

• 当您将鼠标悬停在 Next 或 Prev 上时，它会将内容沿按钮方向移动 20 像素。
• 当您单击按钮时，轮播会启动动画。

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

我使用jCarousel作为它的插件和jQuery easing。

我为你准备了一个JsFiddle。

错误：

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

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

我该如何解决？

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';
});

比我更新了点击处理程序：

$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)- 不知何故它没有存储在小提琴中......</p>

Answer 2

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