Grow your CSS skills. Land your dream job.

Can you improve my slideshow?

  • # June 20, 2013 at 9:09 pm

    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();
    }
    });

    # June 21, 2013 at 2:05 am

    Could you elaborate a bit more regarding the following comment?

    > 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 don’t see the space that opens beneath the intro navigation area disappearing unless the sliding is removed. I think I’m just misunderstanding you though.

    # June 21, 2013 at 10:13 am

    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.

    # June 21, 2013 at 10:25 am

    I figured it out. I used this:

    http://jqueryui.com/accordion/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".