翻轉父母並被子元素替換

Question

我想設計一個類似於此的導航欄：http://seelview.roNSFW！特別是音樂活動項目的行爲！如果任何人都可以向我解釋它是如何完成的，我會很樂意。

Answer 1

您鏈接到的網站使用jQuery動畫top和opacity屬性來實現「翻轉」效果。這裏是有關代碼 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); 
});