Последовательность эффектов для jQuery clickable element

Question

Я создал тег h2, а использование jQuery превратило его в одну из кнопок. При нажатии скрытое содержимое будет скользить вниз под этой кнопкой. Моя проблема заключается в последовательности эффектов, я не могу заставить их приурочить правильно.

Вот как я хотел бы, чтобы это выглядело:

1. Кнопка имеет закругленные углы. Когда вы нажимаете, закругленные углы на нижней части удаляются, поэтому похоже, что скрытый контент скользит из нижней части кнопки.

2. При повторном нажатии кнопки содержимое перемещается вверх в кнопку. Когда содержимое закончит движение вверх, кнопка возобновит внешний вид всех закругленных углов.

На моем jfiddle mockup есть 2 примера кнопок. Пример 1 работает с первым щелчком, но кнопка становится круглой, пока содержимое не вернется назад при повторном нажатии.

При нажатии кнопки «Пример2» кнопка остается круглой, когда содержимое открывается. Но при повторном нажатии, чтобы скрыть содержимое, последовательность работает в правильном порядке.

Вот суть:

$('.section').hide(); 


$('.example1').click(function(event) { 
    event.preventDefault(); 

    $(this).next().slideToggle('slow') 
    .prev().toggleClass('open-header');  
}); 


$('.example2').click(function(event) { 
    event.preventDefault(); 

    $(this).next() 
     .slideToggle('slow') 
     .queue(function(next) { 
      $(this).prev().toggleClass('open-header'); 
      $(this).dequeue(); 
     }); 
}); 

Я хочу, чтобы объединить рабочие части каждой кнопки, но я не знаю, как. Я читал другие сообщения об использовании .queue() или callbacks, но я не должен знать, что я делаю, потому что я не могу заставить его работать. Какие-либо предложения?

Answer 1

вместо того, чтобы использовать переключатель, просто проверить, если он имеет .open-header класс вручную, а при скольжении, достаньте класс на обратный вызов:

$('.example1').click(function(event) { 
    event.preventDefault(); 
    if(!$(this).hasClass('open-header')) { 
     $(this).addClass('open-header'); 
     $(this).next().slideDown('slow'); 
    } else { 
     $(this).next().slideUp('slow',function() { 
      $(this).siblings('h2').removeClass('open-header'); 
     }); 

    } 
}); 

обновлена ​​скрипку: http://jsfiddle.net/WsE8R/5/

Answer 2

Вы, вероятно, потребуется для обнаружения существования класса open-header в функции и изменения порядка операций. Вам нужно, чтобы класс переключился первым на открытое, и вам нужно, чтобы последний был закрыт.

Так что-то вроде этого:

$('.example1').click(function(event) { 
    event.preventDefault(); 

    if($(this).hasClass('open-header')) { 
     // we need to close it 
     $(this).next().slideToggle('slow').prev().toggleClass('open_header'); 
    } else { 
     // we need to open it 
     $(this).toggleClass('open_header').next().slideToggle('slow'); 
    } 
});