在 IE9 中复制 CSS3 动画

Question

我知道 CSS3 动画在 IE9 下无法工作，但我已经为 header 制作了一个过渡，它使用以下 [=29= 为现代浏览器变得固定和缩小].

/** This fires when viewport scrolls down past 60px **/
.fm-container.small .branding {width:120px;transition: all 0.2s ease;}
.fm-container.small ul.prim-nav {margin-top:8px;transition: all 0.2s ease;}
.fm-container.small .prim-nav li ul a {font-size:100%;}
.fm-container.small .navicon:after {top:15px;transition: all 0.2s ease;}
.fm-container.small .highlight {opacity:0;}

/** This fires when viewport is at 0px from top **/  
.fm-container.large .branding {width:200px;transition: all 0.2s ease;}
.fm-container.large ul.prim-nav {margin-top:30px;transition: all 0.2s ease;}
.fm-container.large .prim-nav li ul a {font-size:100%;}

和 jQuery:

// Header scroll function
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    // Add class for animate size changes when scrolled
    if($(document).scrollTop()>60){
        $(".fm-container").removeClass("large").addClass("small");
    } else{
        $(".fm-container").removeClass("small").addClass("large");  
    }
});

所以我的问题是，知道这在 IE9 中不起作用，有没有人能帮我把它变成适用于所有浏览器的 jQuery 动画，现代的和旧的？

我做了几次尝试，但它似乎总是以奇怪的方式进行动画处理。

我试过这样编造：

// Header scroll function
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    // Add class for animate size changes when scrolled
    if($(document).scrollTop()>60){
        $(".fm-container").removeClass("large").addClass("small");
        $(".fm-container.small").animate(width:"120px");
        $(".fm-container.small ul.prim-nav").animate(marginTop:"8px");
        $(".fm-container.small .navicon:after").animate(top:"15px");
        $(".fm-container.small .highlight").animate(opacity:"0");
    } else{
        $(".fm-container").removeClass("small").addClass("large");
        $(".fm-container.small").animate(width:"200px");
        $(".fm-container.small ul.prim-nav").animate(marginTop:"30px");
        $(".fm-container.small .navicon:after").animate(top:"12px");
        $(".fm-container.small .highlight").animate(opacity:"1");   
    }
});

但是，当我滚动到顶部和第二个时，这似乎永远不会 spring 返回，似乎我正在以一种非常基本的方式进行此操作（因为我的技能是基本的）但我正在尝试了解如何正确执行此操作。

如有任何帮助，我们将不胜感激。

Answer 1

全部排序...我遇到了以下内容（我根据需要进行了编辑）。将此张贴在这里以防有人看到它以供将来参考。

$(window).scroll(function(){
        if($(document).scrollTop() > 33)
        {
            if($('.fm-container').data('size') == 'big')
            {
                $('.fm-container').data('size','small');
                $('.fm-container').stop().animate({height:'60px'},200);
                $('.branding').stop().animate({width:'120px'},200);
                $('.logo-spacer').stop().animate({width:'120px'},200);
                $('.fm-container ul.prim-nav').stop().animate({marginTop:'8px'},200);
                $('.fm-container .highlight').stop().animate({opacity:'0'},200);
            }
        }
        else
        {
            if($('.fm-container').data('size') == 'small')
            {
                $('.fm-container').data('size','big');
                $('.fm-container').stop().animate({height:'85px'},200);
                $('.branding').stop().animate({width:'200px'},200);
                $('.logo-spacer').stop().animate({width:'200px'},200);
                $('.fm-container ul.prim-nav').stop().animate({marginTop:'30px'},200);
                $('.fm-container .highlight').stop().animate({opacity:'1'},200);
            }  
        }
});

在 IE9 中复制 CSS3 动画

Replicating a CSS3 animation in IE9

css

jquery

transitions