切換停止並使用jquery點擊開始動畫

Question

我有一個菜單，我使用jquery爲其設置動畫。當您點擊菜單中的「a」時，某些ajax內容會被加載。

我想要停止您所在頁面的鏈接（A）的動畫，並給它另一種顏色。 當您點擊另一個鏈接時，上一個鏈接將再次生成動畫，並再次使用舊的顏色。

這是函數：

$.fn.flipNav = function(options) { 

     options = $.extend({ 
      speed : 200 
     }, options); 

     return this.each(function() { 

       console.log(this); 

      var nav = $(this), 
       lis = $('li', nav), 
       anchors = $('.inactive', lis).css('padding', 0), 
       spanHeight; 

      $.each(anchors, function() { 
       var a = $(this), 
        val = a.text(); 

       a.html('<span>' + val + '</span> <span>' + val + '</span>') 
       .parent('li') 
        .height(a.children('span:first').outerHeight()) 
       .end() 
       .children('span:first') 
        .css('marginTop', 0) // strange for IE 
      }); 

      spanHeight = lis.eq(0).height(); 

      lis.hover(function() { 
       $(this).find('span:first').animate({ 
        marginTop : '-' + spanHeight 
       }, { duration: options.speed, queue : false }); 
      }, function() { 
       $(this).find('span:first').animate({ 
        marginTop : 0 
       }, { duration: options.speed, queue: false }); 
      }); 

     }); // end each 

    } 

，這是一些代碼，我的工作：

$(".inactive").click(function(){ 
$("#navigatie ul li a").each(function(){ 
      $(this).removeClass("active").addClass('inactive'); 
      }); 

     $(this).removeClass("inactive").addClass('active'); 
     $(this).find('span').css("color", "#BE1823"); 

     $(this).find('span:first').stop(true, true); 

    }); 

我有一個小提琴與所有的工作代碼：http://jsfiddle.net/388Qs/ 正如你所看到的，顏色發生變化，但動畫不會停止。

Answer 1

更改本節

lis.hover(function() { 
       $(this).find('a:not(".active") span:first').animate({ 
        marginTop : '-' + spanHeight 
       }, { duration: options.speed, queue : false }); 
      }, function() { 
       $(this).find('a:not(".active") span:first').animate({ 
        marginTop : 0 
       }, { duration: options.speed, queue: false }); 
      }); 

和應採取的動畫部分的護理。背景顏色仍然需要重新應用，但我認爲你提到的問題區域應該是固定的。