如何爲添加由另一個腳本創建的類的懸停函數設置動畫效果？

Question

我正在從一個現有的模板工作，並且我已經獲得了我的菜單以將ulDisplay類添加到列表項並打開懸停時的整個菜單。現在我想動畫而不是彈開它？菜單四層深，因此找到兒童多層次的線條很重要。

這裏是腳本：

$(document).ready(function() { 


     $('ul#nav-primary').hover(function() { 

       $(this).addClass("ulDisplay"); 
       $(this).find('ul,li').removeClass("ulHide"); 
       $(this).find('ul,li').addClass("ulDisplay"); 

      }, 

     function() { 
      $('ul#nav-primary').removeClass("ulDisplay"); 
      $('ul#nav-primary').find('ul,li').removeClass("ulDisplay"); 
      $('ul#nav-primary li').find('ul,li').addClass("ulHide"); 
      }) 


    }); 

SORRY應該已經向這個提前一點：

我曾嘗試迄今不起作用：

$(document).ready(function() { 


      $('ul#nav-primary').hover(function() { 
        $(this).slideToggle('normal'); 
        $(this).find('ul,li').removeClass("ulHide"); 
        $(this).find('ul,li').addClass("ulDisplay"); 
       }, 

      function() { 
       $('ul#nav-primary').slideToggle('normal'); 
       $('ul#nav-primary li').find('ul,li').removeClass("ulDisplay"); 
       $('ul#nav-primary li').find('ul,li').addClass("ulHide"); 
       }) 


     }); 

此外，我曾嘗試：

$(document).ready(function() { 


      $('ul#nav-primary').hover(function() { 

        //$(this).addClass("ulDisplay"); 
        $('ul#nav-primary li').find('ul,li').removeClass("ulHide"); 
        $('ul#nav-primary li').find('ul,li').addClass("ulDisplay").stop(true, true).slideToggle(1000); 

       }, 

      function() { 
       //$('ul#nav-primary').removeClass("ulDisplay"); 
       $('ul#nav-primary li').find('ul,li').removeClass("ulDisplay").stop(true, true).slideToggle(1000); 
       $('ul#nav-primary li').find('ul,li').addClass("ulHide"); 
       }) 


     }); 

最後：

$(document).ready(function() { 


     $('ul#nav-primary').hover(function() { 

       //$(this).addClass("ulDisplay"); 
       $('ul#nav-primary li').find('ul,li').removeClass("ulHide"); 
       $('ul#nav-primary li').find('ul,li').addClass("ulDisplay", 1000); 

      }, 

     function() { 
      //$('ul#nav-primary').removeClass("ulDisplay"); 
      $('ul#nav-primary li').find('ul,li').removeClass("ulDisplay", 1000); 
      $('ul#nav-primary li').find('ul,li').addClass("ulHide"); 
      }) 


    }); 

下面是HTML：

<div id="nav"> 
    <h3><a href="/TemplatePackage/subtopic/B/index.html">Topic Homepage</a></h3> 
    <ul id="nav-primary"> 
     <li><a href="#">Level 1</a> 
      <ul> 
       <li><a href="#">Level 2</a> 
        <ul> 
         <li><a href="#">Level 3</a> 
          <ul> 
           <li><a href="#">Level 4 - Item 1</a></li> 
           <li><a href="#">Level 4 - Item 2</a></li> 
           <li><a href="#">Level 4 - Item 3</a></li> 
           <li><a href="#">Level 4 - Item 4</a></li> 
           <!--<li><a href="/TemplatePackage/subtopic/B/basic_info/screening/level4.html#5">Level 4 - Item 5</a></li>--> 
          </ul> 
         </li> 
         <li><a href="#">Level 3</a></li> 
         <li><a href="#">Level 3</a></li> 
         <li><a href="#">Level 3</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Level 2</a></li> 
       <li><a href="#">Level 2</a></li> 
       <li><a href="#">Level 2</a></li> 
       <li><a href="#">Level 2</a></li> 
       <li><a href="#">Level 2</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Level 1</a> 
      <ul> 
       <li><a href="#">Level 2</a><ul> 
        <li><a href="#">Level 3</a> 
          <ul> 
           <li><a href="#">Level 4</a></li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Level 1</a> 
      <ul> 
       <li><a href="#">Level 2</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Level 1</a></li> 
     <li><a href="#">Level 1</a></li> 
     <li><a href="#">Level 1</a></li> 
    </ul> 
</div> 
<div class="bottom"></div> 

Answer 1

jQuery用戶界面（核心）能夠transition some properties when you add a class。

$(this).find('ul,li').addClass("ulDisplay",1000); // milliseconds 

不過，如果你正在做的是在顯示和隱藏嵌套UL塊，請嘗試使用.slideToggle()（或單獨，.slideDown()和.slideUp()），而不是添加和刪除類。

Answer 2

使用JQuery動畫來做你想做的事。嘗試使用.toggle()功能：

$(document).ready(function() { 


    $('#primaryMenu').hover(function() { 

      $(this).toggle('fast'); 
      //$(this).find('ul,li').removeClass("ulHide"); 
      //$(this).find('ul,li').addClass("ulDisplay"); 

     }, 

    function() { 
     $('#primaryMenu').toggle('fast'); 
     //$('ul#nav-primary').find('ul,li').removeClass("ulDisplay"); 
     //$('ul#nav-primary li').find('ul,li').addClass("ulHide"); 
     }) 


}); 

更新

與不變的模板工作是很好的大部分時間，但也有一些，當你緊張起來momentes。然而，並非所有的東西都丟你可以使用JavaScript來修改密碼，我發現這個職位Pure javascript method to wrap content in a div在接受的答案，你可以找到這段代碼：

org_html = document.getElementById("slidesContainer").innerHTML; 
new_html = "<div id='slidesInner'>" + org_html + "</div>"; 
document.getElementById("slidesContainer").innerHTML = new_html; 

我個人發現，相當驚人！並將其寫入某處，因爲我認爲這非常有用。希望它可以幫助你。

Answer 3

好所以我想感謝你們兩位的洞察力和幫助。它真的幫助找到答案。這裏要說的是結束了工作代碼：

$(document).ready(function() { 

    $('ul#nav-primary').find('li').hover(function() { 
      $(this).children('ul').slideDown('normal'); 
      $(this).children('ul').removeClass('ulHide'); 
      $(this).children('ul').addClass('ulDisplay'); 
      $(this).children('ul').children('li').removeClass('ulHide'); 
      $(this).children('ul').children('li').addClass('ulDisplay'); 
       }); 


}); 

很大程度上得益於EH_warch和Blazemonger

我發現其實問題就出在CSS中：看到這段視頻：http://jqueryfordesigners.com/video.php?f=animation-jump2.flv 這將有助於人們瞭解爲什麼會出現是動畫中的一個跳躍。