如何将两个不同元素的jQuery动画slideUp和slideDown链接在一起

debugcn 发表于 Dev

图形学

我将如何修改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);
}

杰里米·蒂尔（Jeremy Thille）

为什么不只是

$("#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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。