Question

我理解CSS3动画在IE9中不起作用，但是我已经为一个标题进行了转换，使用以下CSS对现代浏览器进行修复和缩小。

/** 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");   
    }
});

但是对于其中一个，当我滚动到顶部和两个时似乎永远不会回弹，看起来我正在以一种非常基本的方式做这件事（因为我的技能是基本的）但我正在努力学习如何做到这一点正常。

非常感谢任何帮助。

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动画

1 个答案: