Question

我正在为网站创建滑动/动画页面模板。

默认情况下，我在用户屏幕上显示3页。在左侧，我们可以看到前一页的10％。在屏幕的中央，我显示的是当前页面，在右侧，我们可以看到下一页的10％。

在这个网站上，有一个顶级菜单，允许我们选择任何项目并在页面之间导航。每个项目都链接到本网站的5个当前页面之一，并显示页面的相应标题。

当我点击顶部菜单中的一个项目时，我正在向左或向右滑动/动画，直到我设置并到达链接到所选菜单项的正确页面。

这是“myLoopright”功能，我可以多次调用滑动功能。

        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/

干杯

使用JQuery动画和旋转页面，

0 个答案: