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

Question

我将如何修改 renderCalculator 函数以 slideUp 食谱和 slideDown 食谱计算的结果？两个动画功能应该链接在一起。我看到了 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>

Answer 2

我是从你的 JSfiddle 那里得到的。单击不会执行任何操作，因为您创建了一个按钮而不是 selecting 现有按钮。

var costHTML = $("<button>Calculate Weekly Total</button>") 实际上 在浏览器的内存中创建 一个新的 jQuery 对象。如果你想 select 现有的，使用 :

在HTML中：

<button id="btn-calculate">Calculate Weekly Total</button>

在 JS 中：

$("#btn-calculate").click( function(){
     alert("Button clicked!");

     $("#results").slideDown('slow', function(){
        $(".recipeSelector").slideUp();
     });
});

Answer 3

实际上我按自己的方式重写了它 =) 如果它按照您的要求执行，代码甚至不到 30 行高。

在此处查看实际效果：http://codepen.io/jeremythille/pen/JowaQj

我用 Coffeescript 写的（然后编译成 javascript），你可以在 codepen 中用顶部的小 "eye" 图标切换原始代码和编译代码。

我也修改了数据对象，使结构更简单，更容易操作。

$ul = $("ul.wrapper")

for recipe in data.recipes
    template = "<li><h2>"+recipe.name+"</h2>"

    cost = 0

    for ingredient, quantity of recipe.ingredients
        template += "<p>"+ingredient+" : "+quantity+"</p>"
        cost += quantity * data.products[ingredient].cost // calculating recipe cost on the fly

    template += "How many "+recipe.name+" should be baked?"
    template += " <input type='number' value='0' data-cost='"+cost+"' />" # Storing the cost of one recipe in the input itself. Then, we just have to multiply that by the quantity
    template +="</li>"

    $ul.append template



$("button").click ->
    totalCost = 0

    $("input[type=number]").each ->
        cost = parseFloat($(this).data('cost'))
        qty = parseInt($(this).val())
        totalCost += cost * qty

    $("span.amount").text totalCost
    $("h2").slideDown()
    $ul.slideUp()

Answer 4

在将代码放置在不同位置的反复试验之后，这成功了：

$(".recipe").slideUp('slow', function() {
    resultsHTML.empty(); //delete old info
    calculateAndPrintTotals(resultsHTML);
    $("#results").slideDown('slow');
    });

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

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

jquery

slidedown

slideup