2

フィギュアの.slider-activeときにアクティブなクラスを持つjQueryスライダーに取り組んでいます。mouseEnter

.slider-imgcontainerこのようにして、私と私のフィグキャプションをクールな効果でアニメーション化したいと思います:

変更の際.slideractive、前のオブジェクトは の幅.slider-imgcontainerを 250px に、 と の後にwidthをpadding0figcaptionに縮小する必要があります。 の を縮小するwidthとfigcaption、テキストが高すぎたので、 と を使用.hideし.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 に答える