jQuery的，UI選項卡NAV動畫，我需要如果li.ui的選項卡選擇

Question

這個網頁是實時的http://settlementprep.com/services/

$("#services_nav li a.move ").hover(function(){ 
     $(this).stop().animate({'padding-bottom':"20px"},{queue:false,duration:200}); 
    }, function() { 
     $(this).stop().animate({'padding-bottom':"0px"},{queue:false,duration:200}); 
    }); 

它不是這個動畫動畫所有的導航項目。但我希望現在的李會被卡住，而不是退縮，但我也不希望它在已經上漲的時候滑過......有什麼想法？

Answer 1

只需添加類「主動」，以被點擊的鏈接。並相應地添加CSS。請參閱下面的示例代碼：

var $serviceLinks = $("#services_nav .move"); 
$serviceLinks.hover(function(){ 
    if(!$(this).hasClass('active')) 
     $(this).stop().animate({'padding-bottom':"20px"},{queue:false,duration:200}); 
}, function() { 
    if(!$(this).hasClass('active')) 
     $(this).stop().animate({'padding-bottom':"0px"},{queue:false,duration:200}); 
}); 

$serviceLinks.click(function(){ 

    $serviceLinks.removeClass('active'); 
    $(this).addClass('active'); 

} 

Answer 2

不是丟棄當鼠標離開，當一個新的元素盤旋的元素現在掉落的：

$("#services_nav li a.move ").hover(function(){ 
      $("#services_nav li a.move ").each(function(){ 
       $(this).stop().animate({'padding-bottom':"0px"},{queue:false,duration:200}); 
      }); 
      $(this).stop().animate({'padding-bottom':"20px"},{queue:false,duration:200}); 
     });