jquery - 悬停时的 CSS 元素过渡

Question

我正在尝试复制类似 http://www.gk-films.com 处的扩展悬停菜单之类的东西但是以 HTML5/CSS3 的方式。它们有一个绝对位于窗口右侧的小元素，悬停时会扩展为带有选项的全宽菜单。

到目前为止，我已经尝试过 jQuery 和特定于浏览器的过渡效果，但无法提出可靠的工作解决方案。

我现在的基础工作是这样的: http://jsfiddle.net/z64vX/

<nav>
    <ul>
        <li><a href="#main">Main</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#works">Works</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>


body { background: #bbb; }
nav { display: block }

nav { 
    position: absolute; 
    top: 0; 
    right: 30%; 
    width: 300px; 
    height: 40px; 
    z-index: 950; 
    background: rgba(255,255,255,0.9); 
    -webkit-transition: left 0.5s ease, right 0.5s ease;
}
nav:hover { 
    right: 0; 
    left: 0; 
    width: auto; 
    height: auto;
}
nav ul { display: none; width: 100%; }
nav:hover ul { display: block; }

问题是过渡对于导航容器的定位和宽度不能正常工作(它只是跳到结束的“左”值)。

理想情况下，菜单元素会在扩展完成后淡入，所以如果您也放入该部分，那就太好了。

也许，通过 jQuery 的 animate 函数来做会更好，但我不想在这里用不同的代码变体造成困惑。

---

经过一些摆弄之后，我实际上使用 jQuery animate 取得了进展:http://jsfiddle.net/z64vX/6/

$(function(){
    var nav = $("nav"),
    navHeight = nav.height();

    nav.hover(
        function() {
            navOn();
        }, function() {
            navOff();
        }
    );

    var navOn = function(){
        nav.stop().animate({right: '0%', width: '100%', height: navHeight}, 1000, function() {
            $(this).find("ul").fadeIn('slow');
        });
    };

    var navOff = function(){
        nav.animate({right: '10%', width: '200px', height: '20px'}, 500).find("ul").fadeOut(100);
    };

    navOff();
});

关于它的防 flex 能有什么想法吗？或者有没有更好的方法？

Answer 1

你可以用这个。

body { background: #bbb;text-align:center; }
nav { display: inline-block; }

nav { 
    top: 0; 
    text-align:left; 
    width: 40%; 
    height: 40px; 
    z-index: 950; 
    background: rgba(255,255,255,0.9); 
    -webkit-transition: width 0.5s ease;
}
nav:hover { 
    width: 100%; 
    height: auto;
}
nav ul { display: none; width: 100%; }
nav:hover ul { display: block; }
​