Grow your CSS skills. Land your dream job.

Add Fading Effect to SlideDown/SlideUp (JQuery)

  • # November 21, 2011 at 8:42 pm

    How can I combine sliding effect with fading effect on the jquery accordion? I created a system that is not good here, with animatng height and opacity. But the declaration of padding on the .widget-content makes the animation not run smoothly. And I think animating height and opacity are not right procedure for jquery panels. Can I combine fading and sliding effect simultaneously together in jquery?

    # November 28, 2011 at 8:47 pm

    Anybody have the answer for my problem?

    # December 1, 2011 at 10:05 pm

    PLEEAASEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    # February 25, 2012 at 10:34 am

    OH DEAAARRRRR…. much easier than what I thought:

    $(function() {
    $('#sidebar-wrapper .widget-content').hide();
    $('#sidebar-wrapper h2:first').addClass('active').next().animate({opacity:1}, {duration:600, queue:false}).slideDown();
    $('#sidebar-wrapper h2').click(function() {
    if($(this).next().is(':hidden')) {
    $('#sidebar-wrapper h2').removeClass('active').next().animate({opacity:0}, {duration:600, queue:false}).slideUp();
    $(this).toggleClass('active').next().animate({opacity:1}, {duration:600, queue:false}).slideDown();
    }
    return false;
    });
    });
    # September 18, 2012 at 3:00 am

    Hi Hompimpa,

    Thanks a lot for this. Surprisingly, the solution you found (very simple and easy) is not suggested that much on the web.

    So, thanks again!

    Cheers

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

You must be logged in to reply to this topic.

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