jquery - 如何将两个不同元素的 jQuery 动画 SlideUp 和 SlideDown 链接在一起

Question

如何修改 renderCalculator 函数以向上滑动配方并向下滑动配方计算的结果？两个动画函数应该链接在一起。我看到了 SlideUp 和 SlideDown 的答案，但我不确定将代码放在函数中的位置。

var renderCalculator = function(base) {
    var costHTML = $("<button>Calculate Weekly Total</button>");
    var resultsHTML = $("<div id='results'></div>");
    costHTML.on("click", function(event) {
        //total everything

        //grab all inputs on page
        $(".recipeSelector").each(function(i,input) {
            if (input.value > 0)
            {
                //figure out how many recipes were 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);
}

Answer 1

为什么不只是

$("#results").slideDown();
$(".recipeSelector").slideUp();

？

我错过了什么吗？

如果您想先使用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>