1

私は個人的な使用のために自分のスライドショーを作成しようとしていますが、問題に直面しています。

jQueryプラグインで、プラグインを操作するオブジェクトを作成しました。コードは次の形式で構成されています。

(
    function($)
    {
        $.fn.wplSlider = function(options)
        {
            var slider     =   this;

            var settings    =   $.extend(
                {
                    'animationSpeed'    :   750,
                    'animationEasing'   :   null,
                    'animationAutoStart':   true,
                    'pauseTime'         :   3500
                },
                options
            );

            var methods =   {
                animationRun        :   false,
                totalSlides         :   0,
                init                :   function()
                {
                    // This method initiating the slide show elements
                },
                slidesStatus        :   function()
                {
                    // This method initiating the slides status
                },
                slideNumber         :   function()
                {
                    // Assign a number to each slide
                },
                getSlidesAmount     :   function()
                {
                    // Get the amount of slides
                },
                next                :   function()
                {
                    // Prepare the next slide that will be displayed
                },
                prev                :   function()
                {
                    // Prepare the next slide that will be displayed
                },
                goTo                :   function(item)
                {
                    // Prepare the specified slide
                },
                slideOut            :   function()
                {
                    // Slide out the current slide
                    slider.find('li[data-status="current"] .container').animate(
                        {
                            top :   '-75px'
                        },
                        600
                    );

                    slider.find('li[data-status="current"] span, li[data-status="current"] a').animate(
                        {
                            opacity :   0
                        },
                        600
                    );
                },
                slideIn             :   function()
                {
                    // Slide in the current slide
                    $('li[data-status="current"]').animate(
                        {
                            'opacity'   :   1
                        },
                        650
                    );
                }
            }

            /* Allow chainability */
            return this.each(
                function()
                {
                    methods.init();
                    methods.slideOut();
                    methods.next();
                    methods.slideIn();
                }
            );
        }
    }
)(jQuery);

上記のコードでは、slideOut / next/slideInを実行すると手順が非常に高速になるという問題があります。

具体的には、slideIn（）はslideOut（）と同時に実行されます。

slideOut（）が完了した後にのみslideIn（）を実行する方法はありますか？

4

1 に答える 1

2

slideOut() が完了した後でのみ、slideIn() を実行する方法はありますか?

はい、以下のコードでできます。

以下のコードでは、slideOut() 関数が実行されたときに、slideIn() 関数を実行できます。

$.when(methods.slideOut())
  .then(methods.slideIn());

続きを読む

于 2012-10-15T12:01:42.167 に答える