CSS过渡不适用于jQuery类替换

Question

我有一个简单的 jQuery 脚本，当页面向下滚动 100 像素时，它会更改 ul 上的类，将菜单从居中移动到 float: right，并使用 CSS 过渡平滑移动。这可能吗？

我的脚本：

 $(document).on("scroll",function(){
if($(document).scrollTop()>100){
    $("#nav").removeClass("stick-menu-top").addClass("stick-menu");
} else{
    $("#nav").removeClass("stick-menu").addClass("stick-menu-top");
}
});

我的两门课：

ul.stick-menu-top { float:none; margin:0 auto; width:614px; padding:17px 0 0; }
ul.stick-menu { float:right; width:614px; padding:17px 0 0; }

我的 CSS 动画：

    #nav.stick-menu-top, #nav.stick-menu-top a, #nav.stick-menu-top ul, #nav.stick-menu-top li{ transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; }

我非常感谢任何帮助。您可以在这里查看网站：http://www.thoriumdocumentary.com/redesign/

Answer 1

可以转换并在W3C site 找到的属性列表，float 不是其中之一:)

我认为处理这种情况的最佳方法是删除浮动，并通过更改 margin-right 或 left 来定位菜单项（这与 position:relative 一起用于菜单容器及其父项）在 jQuery 的帮助下。

例如：

$(document).ready(function(){

    // before the scroll
    $('#menuContainer').css('margin-right',($(window).width() - $('#menuContainer').width())/2 + 'px');

    // after scroll
    $('#menuContainer').css('margin-right',($(window).width() - $('#menuContainer').width()) + 'px');
})

Answer 2

将此添加到类中：

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

如果这对您不起作用，您可以尝试 jquery ui switchClass()： http://jqueryui.com/switchClass/