简体   繁体   English

HTML5和Javascript中的帧过渡

[英]Frame transition in HTML5 and Javascript

I have a big problem. 我有一个大问题。 Using sequence.js And created my structure. 使用sequence.js并创建了我的结构。 It's working: 工作正常:

<script type="text/javascript"> 
        $(document).ready(function(){
            var options = {
                autoPlay: false,
                nextButton: true,
                prevButton: true,
                preloader: false,
                transitionThreshold: false,
                cycle: false,
                hashTags: true,
                preloader: true,
                fadeFrameWhenSkipped: false,
                waitForAnimationToComplete: true,
                navigationSkipThreshold: 100,
                navigationSkip: false,

            }
            var sequence = $("#sequence").sequence(options).data("sequence");

            sequence.afterLoaded = function(){
                $("#nav").fadeIn(500);
                $("#nav li:nth-child("+(sequence.settings.startingFrameID)+") a").addClass("active");
            }

            sequence.beforeNextFrameAnimatesIn = function(){
                $("#nav li:not(:nth-child("+(sequence.nextFrameID)+")) a").removeClass("active");
                $("#nav li:nth-child("+(sequence.nextFrameID)+") a").addClass("active");
            }

            $("#nav li").click(function(){
                if(!sequence.active){
                    $(this).children("a").removeClass("active").children("a").addClass("active");
                    sequence.nextFrameID = $(this).index()+1;
                    sequence.goTo(sequence.nextFrameID);
                }
            });
        }); 



    </script>

I use horizontal theme and added my bg and have navigation menu. 我使用水平主题并添加了bg并具有导航菜单。

<ul id="nav">
<li><a href="#">ONE</a></li>
<li><a href="#">TWO</a></li>
<li><a href="#">THREE</a></li>
<li><a href="#">FOUR</a></li>
<li><a href="#">FIVE</a></li>
</ul>

When click TWO item on ONE, go to TWO, nothing problem. 当单击一个上的两个项目时,转到两个,没有问题。 But when click FIVE on TWO go to the corresponding page but don't show between items. 但是,当在两个菜单上单击“五个”时,将转到相应的页面,但不会在项目之间显示。 I want this: 我要这个:

EG Click FOUR on TWO, first THREE and after get FOUR. EG在两个上单击“四个”,前三个,然后得到四个。 I hope, you can understand me. 希望您能理解我。 How can i do this? 我怎样才能做到这一点?

Sequence.js doesn't work in this way. Sequence.js无法以这种方式工作。 Frames are independent of each other, so when you are viewing the first frame, and navigate to the fifth, the frames in between remain inactive and unchanged. 框架彼此独立,因此,当您查看第一个框架并导航到第五个框架时,它们之间的框架保持不活动状态且保持不变。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM