Question

I’m trying to have a top menu slideToggle and bounce at the same time after a #content div has loaded. Here’s the correct code with out the bounce:

$(document).ready(function() {

    $("#content").hide();

    $("#nav-top").hide();

        $(window).load(function() {
            $("#content").fadeIn(3000, function() {
                $("#nav-top").slideToggle(function() {
                    $("#music-player").fadeIn(1000);
                });
            });
    });
});

— I’m trying to do it on the $(“#nav-top”).slideToggle(function() {

So, does any know how something like this would be achieved? Thank you.

Answer 1

You can include jQuery UI’s bounce effect, and chain the calls to slideToggle and effect("bounce") together:

 $("#nav-top").slideToggle(function() {
      $("#music-player").fadeIn(1000);
 }).effect("bounce",300);

You can see it working in this js fiddle. Although I actually prefer the effect without the bounce 🙂