jquery - 当鼠标进入新对象时停止并回滚其他 jQuery 动画对象

Question

我正在开发一个 jQuery slider ，当 mouseEnter 一个数字时，它具有事件类 .slider-active。

通过这种方式，我想以一种很酷的效果为我的 .slider-imgcontainer 和 Figcaption 制作动画:

当.slideractive更改时，之前的对象必须将.slider-imgcontainer的宽度减小到250px，并且在width之后figcaption 的 padding 为 0。当我减小 figcaption 的 width 时，文本太高，所以我只是使用 .hide 和 .show 来纠正这个问题。

然后 slider 开始工作，但是...当鼠标滑过多个图形时，所有图形都会动画化。我尝试纠正此问题，但找不到任何解决方案(使用 .clearQueue() 和 .stop())。

结果:current slider

主要动画代码:

$(document).ready(function(){


    var GLOBAL = {
        window:$(window),
        slider:$('.slider-work'),
        container:$('#container'),
        figure:$("figure")
    }

    /********* SLIDER MAIN *************/
    // INIT LARGEUR ---
    GLOBAL.slider.width($(".slider-work img").size() * 250 + 900);

    // save width of figcaption in attr to animate them after (no auto animate)
    GLOBAL.slider.find("figcaption").each(function(i) {
        var t = $(this);
        if(!t.parent().hasClass("slider-active"))
            t.hide();

        t.attr("largeur", t.width());


    });


    // hover
    GLOBAL.slider.children("figure").mouseenter( function () {


        var oldActive = $(".slider-active");
        var thiss = $(this);

        oldActive.removeClass("slider-active");
        thiss.addClass("slider-active");

        oldActive.find("figcaption").animate({
            width: 0,
            padding: 0
            }, 220, 'linear', function() {
                oldActive.find(".slider-imgcontainer").animate({
                    width : 250
                    }, 400, 'linear', function() {

                            // Animation de l'ancien active fini , alors : 

                            //$(".slider-imgcontainer").removeAttr("style");


                            thiss.removeAttr("style").children(".slider-imgcontainer").animate({
                                    width : 400
                                }, 400, 'linear', function(){
                                    var largeurFigcaption = thiss.find("figcaption").show().attr("largeur");

                                    thiss.find("figcaption").animate({
                                        width : largeurFigcaption,
                                        padding : " 0 20px 20px 20px"
                                        }, 220, 'linear', function(){


                                    });
                            });


                    });
        });
    });
    // END MouseEnter


//End ready
});

以及我用于调试 slider 的代码

 GLOBAL.slider.children("figure").mouseout( function () {
            var thiss = $(this);
            //$("#title span").append(" toto");


            var myChildrenBehave =  GLOBAL.slider.filter(function() {
                var filtered = $(this).children().is(":animated");
                return filtered;
            });

            myChildrenBehave.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));