How to chain together jQuery animations slideUp and slideDown for two different elements -

how modify rendercalculator function slideup recipes , slidedown results of recipe calculation? both animation functions should chained together. saw answers slideup , slidedown, i'm not sure place code in function.

var rendercalculator = function(base) {     var costhtml = $("<button>calculate weekly total</button>");     var resultshtml = $("<div id='results'></div>");     costhtml.on("click", function(event) {         //total          //grab inputs on page         $(".recipeselector").each(function(i,input) {             if (input.value > 0)             {                 //figure out how many recipes made                 a1.bakedrecipes.push({recipe:a1.recipes[input.id],amount:input.value});             }         });          //print out required total information         resultshtml.empty(); //delete old info         calculateandprinttotals(resultshtml);             });     base.append(costhtml);     base.append(resultshtml); } 

why not just

$("#results").slidedown(); $(".recipeselector").slideup(); 

?

did miss something?

if want first slidedomn #results, slideup .recipe, :

$("#results").slidedown('slow', function(){          $(".recipeselector").slideup();      });

#results{ display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="results"><h1>results</h1></div>  <div class="recipeselector"><h1>recipe</h1></div>  <div class="recipeselector"><h1>recipe</h1></div>  <div class="recipeselector"><h1>recipe</h1></div>