Animate the
element as a callback: http://jsfiddle.net/tovic/kw7LD/23/embedded/result,resources,js/
$(document).ready(function() { /* This code is executed after the DOM has been completely loaded */
/* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
$.easing.def = "easeOutBounce";
/* Binding a click event handler to the links: */
$('li.button a').click(function(e) {
/* Finding the drop down list that corresponds to the current section: */
var dropDown = $(this).parent().next();
/* Closing all other drop down sections, except the current one */
$('.dropdown').not(dropDown).slideUp('slow').find('li').animate({
marginLeft: 0,
marginRight: 0
}, 'slow');
dropDown.slideDown('slow', function() {
/* START CALLBACK */
$(this).find('li').animate({
marginLeft: -150,
marginRight: -150
}, 'slow');
/* END CALLBACK */
});
/* Preventing the default event (which would be to navigate the browser to the link's address) */
e.preventDefault();
})
});
Note: Clear your CSS float by adding clear:both in the hr.thin {} selector:
hr.thin {clear:both;}
