treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Add Fading Effect to SlideDown/SlideUp (JQuery)

  • 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?

    <script type="text/javascript">
    $(document).ready(function() {
    $('#sidebar-wrapper .widget-content').hide();
    $('#sidebar-wrapper h2:first').addClass('active').next().animate({opacity:"show",height:"toggle"},600);
    $('#sidebar-wrapper h2').click(function(){
    if($(this).next().is(':hidden')) {
    $('#sidebar-wrapper h2').removeClass('active').next().animate({opacity:"hide",height:"toggle"},600);
    $(this).toggleClass('active').next().animate({opacity:"show",height:"toggle"},600);
    }
    return false;
    });
    });
    </script>


    <div id="sidebar-wrapper">
    <h2>Trigger</h2>
    <div class="widget-content">
    ...
    </div>
    <h2>Trigger</h2>
    <div class="widget-content">
    ...
    </div>
    <h2>Trigger</h2>
    <div class="widget-content">
    ...
    </div>
    </div>
  • Anybody have the answer for my problem?
  • PLEEAASEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  • 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;
    });
    });
  • 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