Question

当.slider-active为数字时，我正在使用活动类mouseEnter的jQuery滑块。

通过这种方式，我想以一个很酷的方式为我的.slider-imgcontainer和我的figcaption制作动画：

当.slideractive更改时，上一个对象必须将.slider-imgcontainer的宽度减小到250px，并在width的{{1}}和padding之后减小0.当我减少figcaption的{{1}}时，文字太高，所以我只使用width和figcaption来纠正此问题。

然后滑块开始工作，但是...当鼠标翻过多个图形时，所有这些都是动画的。我试图纠正这个问题，但我找不到任何解决方案（使用.hide et .show）。

结果：current slider

主要动画代码：

.clearQueue()

我调试滑块的代码

.stop()

我接受所有的想法：）

Answer 1

有多种方法可以解决这个问题，但我最喜欢的方法是在初始鼠标悬停的动画完成后检查鼠标是否仍在该项目上。如果不是你关闭它。

jQuery没有内置的检查鼠标仍然在我所知道的对象上，但是我写了一个非常简单的情况。

var mouse = {
mouseX: null,
mouseY: null,
mouseInWindow: true,
init: function() {
    $(document).bind('mousemove', function(event) {
        mouse.mouseX = event.pageX;
        mouse.mouseY = event.pageY;
        mouse.mouseInWindow = true;
    });
    $(document).bind("mouseleave", function(event) {
        mouse.mouseInWindow = false;
    });
    $(document).bind("mouseenter", function(event) {
        mouse.mouseInWindow = true;
    });
},
isOver: function($element) {
    $elementPosition = $($element).offset();
    $elementWidth = $($element).width();
    $elementHeight = $($element).height();
    $returnValue = true;
    if (mouse.mouseX !== null) {
        if (mouse.mouseX < $elementPosition.left) { $returnValue = false; }
        if (mouse.mouseY < $elementPosition.top) { $returnValue = false; }
        if (mouse.mouseX > $elementPosition.left + $elementWidth) { $returnValue = false; }
        if (mouse.mouseY > $elementPosition.top + $elementHeight) { $returnValue = false; }
        if (!mouse.mouseInWindow) { $returnValue = false; }
    }
    return $returnValue;
}

}

您需要在其他代码之前运行mouse.init（），但之后您可以使用mouse.isOver（$（yourSlideActivator））;

当mouseenter一个新对象时，停止并回滚其他jQuery动画对象

1 个答案: