Can you improve my slideshow?

[martyd777]

I’ve recently been tasked to code a website for a construction company. The homepage mock up contained a slideshow controlled by panels, which collapse/extend as clicked. I was able to accomplish the slideshow using jQuery, but I don’t like how the panels collapse. Take a look:

http://www.llt-group.com/clients/in-and-out-construction/server/

You’ll notice that they open up a space bellow when clicked upon. How do I make it so that the animations happen simultaneously? I rather have it work in one fluid motion, eliminating that space that opens up at the bottom. I hope I explained that well. Here is my jquery:

$(document).ready(function(){

$(".intro span").first().height('188').css({

"background":"#424143"

});

$(".intro span").first().children('p.header').css({

"display":"none"

});

$(".intro span").click(function(){

var height = $(this).height();

if(height < "23"){

$(".intro span").children('p.header').fadeIn();

$(".intro span").animate({

"height":"22px"

}, 500, 'easeInOutQuart');

$(".intro span").css({

"background":"#68696C"

});

$(this).css({

"background":"#68696C"

});

$(this).children('p.header').fadeOut();

$(this).css({

"background":"#424143"

});

$(this).animate({

"height":"188px"

}, 500, 'easeOutCirc');

var path = $(this).children('strong').text();

$(".intro img").fadeOut();

$(".intro img").attr('src',path);

$(".intro img").fadeIn();

}

});

[martyd777]

Sure, I’ll clarify. I was the navigation controls to work like an accordion. It sort of does now, but the following code prevents it from working exactly like an accordion:

$(".intro span").animate({

"height":"22px"

}, 500, 'easeInOutQuart');

When a new panel is clicked on, all the panels are set to 22px momentarily leaving a space of about 166px bellow the panels. Next, the panel that was clicked on is set to 188px. The code that does this is here:

$(this).animate({

"height":"188px"

}, 500, 'easeOutCirc');

These action execute separately, which I believe is the problem.

[martyd777]

I figured it out. I used this:

http://jqueryui.com/accordion/

[Author]

Posts