Question

我正在设计一个类似这样的导航栏：http://seelview.ro NSFW！特别是音乐事件项目的行为！如果有人能向我解释它是如何完成的，我将感激不尽。

Answer 1

您链接到的网站在top和opacity属性上使用jquery动画来实现这一目标＆＃34;翻转＆＃34;影响。这是相关的代码 HTML：

<li id="ev"><span style="opacity: 1; top: 0px;">Music Events</span>
              <ul class="secondary" style="display: none; opacity: 0; top: 25px;">
                <li><a href="/on-the-set">On the set</a></li>
                <li><a href="/concerts">Concerts</a></li>
              </ul>
          </li>

的javascript：

var menu_active = false;
navSecTimeout = setTimeout('',1);

function menu_anim($elem) {
    $elem.find("span").stop().animate({opacity: "1",top: "0px"}, 300);
    $elem.find("ul.secondary").stop().animate({opacity: "0",top: "25px"}, 300,function() {
        $(this).hide(); 
    });
}

$("#ev, #pe").mouseenter(
    function() {
        if (menu_active == true) {
            menu_anim($active_elem); 
        }
        menu_active = true;
        $(this).find("span").stop().animate({opacity: "0",top: "-15px"}, 200); //-25px
        $(this).find("ul.secondary").stop().show().animate({opacity: "1",top: "0px"}, 200); //-10px
        $active_elem = $(this);
        clearTimeout(navSecTimeout);
}).mouseleave(
    function() {
        var $this = $(this);
        navSecTimeout = setTimeout(
            function(){
                menu_active = false;    
                menu_anim($this);
            }
        , 1000);
});

翻转父元素并由子元素替换

1 个答案: