2

我正在研究一个带有活动类的 jQuery.slider-active滑块mouseEnter。

通过这种方式，我想以.slider-imgcontainer一种很酷的效果为我和我的 figcaption 设置动画：

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

然后滑块开始工作，但是......当鼠标滚过多个图形时，它们都是动画的。我试图纠正这个问题，但我找不到任何解决方案（使用.clearQueue()et .stop()）。

结果：当前滑块

主要动画代码：

$(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
});

还有我调试滑块的代码

 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();



        });

我接受所有想法:)

4

1 回答 1

0

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

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

于 2012-11-09T13:04:17.623 回答