1

Webサイトのスライド/アニメーションページテンプレートを作成しています。

デフォルトでは、ユーザー画面に3ページを表示しています。左側には、前のページの10％が表示されています。画面中央に現在のページを表示しており、右側に次のページの10％が表示されています。

このウェブサイトには、任意のアイテムを選択してページ間を移動できるトップメニューがあります。各アイテムは、このWebサイトの現在の5つのページのいずれかにリンクされており、ページのタイトルに応じて表示されます。

トップメニューの1つの項目をクリックすると、選択したメニュー項目にリンクされた正しいページに到達するまで、ページを左または右にスライド/アニメーション化します。

これが「myLoopright」関数で、sliddingright関数を何度も呼び出すことができます。

        function myLoopright () 
        {          
            //  create a loop function
            setTimeout(function () 
            {   
                sliddingright(page_id_target_right,previous_right_old,previous_right,next_right,pages_numbers,loop);
                loopcount++;    //  increment the counter

                if (loopcount <= (difference_pages-1)) 
                {   
                   myLoopright();       //  ..  again which will trigger another 
                }                        
            }, 1100) //  ..  setTimeout()
        } // closing myLoop function

そしてこれがスライディングライト機能です

function sliddingright(page_id_target_right,previous_right_old,previous_right,next_right,pages_numbers,loop)
{

        duration=1000;
        //Update top Menu DOM items
        $('ul#navigation #'+page_id_target_right).addClass('active');
        $('ul#navigation #'+next_right).addClass('next');
        $('ul#navigation #'+pages_numbers).addClass('previous');

         //Update DOM pages                     
            previous_right_old=parseInt(pages_numbers-1);           
            // PREVIOUS TO HIDDEN
            $('#content .'+previous_right_old).css({ 'left' : '-73%','background-color' : '#EAEAEA'}).animate({'left' : '-151%'}, duration, easing, function(){$('#content .'+previous_right_old).addClass('hidden')});
            // ACTIVE TO PREVIOUS           
            $('#content .'+pages_numbers).css({ 'margin' : '0 6%', 'left' : '5%', 'right' : '5%'}).animate({'left' : '-73%', 'margin-right' : '0%', 'margin-left' : '0%', 'backgroundColor' : '#EFF0F1' }, duration, easing, function(){$('#content .'+pages_numbers).removeClass('hidden').addClass('previous')});                     
            // NEXT TO ACTIVE           
            $('#content .'+page_id_target_right).css({ 'left' : '95%','background-color' : '#EAEAEA'}).animate({'left' : '5%', 'margin-right' : '6%', 'margin-left' : '6%', 'backgroundColor' : '#FFFFFF' }, duration, easing, function(){$('#content .'+page_id_target_right).addClass('active').removeClass('hidden');});
            // HIDDEN TO NEXT
            $('#content .'+next_right).removeClass('hidden').addClass('next').appendTo('#content').css({ 'left' : '173%', 'backgroundColor' : '#EFF0F1'}).animate({'left' : '95%'}, duration);
    }

このコードは機能していますが、多くのページをスライドする必要がある場合、スライド効果は流暢ではありません。

そこで、sliddingright関数のすべてのアニメーションが完了したら、「myLoopright」関数を呼び出して、setTimeout関数を削除したいと思います。

私の開発中のコードを見るには、ここに行くことができます：http: //jsfiddle.net/K2xZB/89/

乾杯

4

0 に答える 0