級聯功能（動畫）和$（'this'）

Question

我有3個鼠標，mouseenter，mouseleave和點擊功能。問題出在點擊事件 - 我有一些麻煩，使它動畫級聯功能的工作。我認爲這個問題是在功能上的「第二級」「$（本）」：

$('.compositos_DBitems_container').on('click', '> div > div:not(.compositos_highlighted)', function() { 

    // De-highlight currently highlighted item 
    function dehighlight_clickedCompositos() { 
     $('.compositos_DBitems_container > div > div.compositos_highlighted').removeClass('compositos_highlighted') 
     .animate({ 'width': '70%', 'height': '70%', 'top': '10%' }, 150, 'swing') 
     .find('p').animate({ 'font-size': '73%' }, 150, 'swing', function() { 
      $(this).animate({ 'width': '90%', 'height': '90%', 'top': '0%' }, 150, 'swing') 
      .find('p').animate({ 'font-size': '100%', 'color': 'rgba(0, 0, 0, 0.5)' }, 150, 'swing'); 
     }); 
    } 

    // Highlight clicked item 
    $(this).addClass('compositos_highlighted').animate({ 'width': '70%', 'height': '70%', 'top': '10%' }, 300, 'swing') 
    .find('p').animate({ 'font-size': '73%' }, 300, 'swing', function() { 
     $(this).animate({ 'width': '100%', 'height': '100%', 'top': '-4.5%' }, 300, 'swing') 
     .find('p').animate({ 'font-size': '110%', 'color': 'rgba(255, 255, 255, 0)' }, 300, 'swing'); 
    }); 

}); 

FIDDLE

這是一個2級的動畫：當你點擊它，在div收縮，然後長回來儘管如此，它只能做第一級。

幫助？

佩德羅

Answer 1

不準確知道你想要什麼以後的事，但我想你應該保存到jQuery的元素的引用，就可以訪問它。這是在回調函數中引用p元素而不是父元素。

var button = $(this); 
$(this).addClass('compositos_highlighted').animate({ 'width': '70%', 'height': '70%',  'top': '10%' }, 300, 'swing') 
.find('p').animate({ 'font-size': '73%' }, 300, 'swing', function() { 
    button.animate({ 'width': '100%', 'height': '100%', 'top': '-4.5%' }, 300, 'swing') 
    .find('p').animate({ 'font-size': '110%', 'color': 'rgba(255, 255, 255, 0)' }, 300, 'swing'); 
}); 

http://jsfiddle.net/BMeMt/6/