move.js同步问题

时间:2016-09-21 07:22:47

标签: javascript jquery animation

我正在尝试使用move.js()制作动画排行榜。有四个部分,加载时应该隐藏不在第一位的人,先做一些人的动画,然后淡入其他用户。

我摆弄了它:https://jsfiddle.net/muwc4enz/

和JS:

$(document).ready(function() {
    // on load, animate it...               
    // set opacity to 0
    $('[data-position!="0"]').css({'opacity':'0'}); 
    $('[data-position!="0"]').addClass("fadein");

    // now display the first place people.. 
    $('.leader_section_1st').each(function(i, obj) {
        // now animate...
        move(obj).scale(3.0).duration(500).end(function() {
            move(obj).scale(1.0).duration(500).end(function() { 
                // and load the rest of the section...
                $('[data-sectionid="'+i+'"]').css({'opacity':'100'});
            });
        });
    });         
});

正如你所看到的,我根本没有动画,但我确实得到了淡入淡出。淡入IN后,它再次回到0不透明度。我不确定为什么会出现这种情况并检查它是不是重新运行文件加载功能,它不是。

如果没有时髦的不透明效果,动画至少会对排行榜顶端的三个人起作用,但这是另一个问题:位于最顶端的用户,在小提琴中名为FAILURE,只有动画一半正确......好像它在动画中途停了下来并被卡住了。

作为额外信息,内容通过php脚本动态加载。

我怀疑它的运行时间是一个问题,因为一切似乎都在运行,我没有得到错误(我担心与数据变量有关的语法)。我想知道是否有人能从代码中看到任何理由,为什么它不会做我期望的......这是重申:

  1. 使除每个类别中的顶级人物之外的所有内容都不可见。
  2. 让那些优秀的学生真的很大(规模3),然后再快速缩小(缩放1)
  3. 当优秀学生再次变小时,其他学生应该淡入,并保持褪色。
  4. 感谢。 亚历

0 个答案:

没有答案