Каскадная функция (анимация) и $ ('this')

Question

У меня есть 3 divs с помощью мыши, мыши и функций щелчка. Проблема заключается в событии клика - у меня проблемы с работой, так как это оживляет работу каскадной функции. Я думаю, что проблема находится на «втором уровне» функции в «$ (это)»:

$('.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 уровня анимации: при нажатии его, ДИВ сжимается, а затем отрастает in - он делает только 1-й уровень.

Помощь?

Педро

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/