Hi there,
So I want to perform a number of animations on a div on a click event. Then I want to perform a second set of animations, again on a click event.
I’m using the same button each time, but changing the id to reverse the process. So the anchor starts off as ‘#more’, then at the end of the animation, it becomes ‘#less’.
The animations work when the anchor has an id of more, but not when it has an id of less. I’m wondering if there is a more graceful way of performing this function.
There a test page up here:
www.theclassifiedsband.co.uk/testpage
and here’s the relevant code:
$('#more').click(function(){
$('#major').fadeOut('slow', function(){
$('#captain').animate({width: "800px"}, 'slow').delay(100).animate({height: "620px"}, 'slow', function(){
$('.hide').fadeIn('slow');
$('#more').text('Read Less').attr('id', 'less');
});
});
});
$('#less').click(function(){
$('#hide').fadeOut('slow', function(){
$('#captain').animate({height: "260px"}, 'slow').delay(100).animate({width: "320px"}, 'slow', function(){
$('#less').text('Read More').attr('id', 'more');
$('#major').fadeIn('slow');
});
});
});
Any thoughts much appreciated.
Mike