CODEWITHSUNDEEP
jqueryslidedownslideup
Grafics
Grafics

Reputation: 157

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

How would I modify the renderCalculator function to slideUp the recipes and slideDown the results of the recipe calculation? Both animation functions should be chained together. I saw answers for slideUp and SlideDown, but I'm not sure where to place the code in the function.

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);
}

Upvotes: 1

Views: 1851

Answers (4)

Grafics
Grafics

Reputation: 157

After trial and error of placing the code in different locations, this worked:

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

Upvotes: 0

Jeremy Thille
Jeremy Thille

Reputation: 26360

I actually rewrote it my way =) If it does what you want it to do, the code is not even 30 lines high.

See it here in action : http://codepen.io/jeremythille/pen/JowaQj

I wrote it in Coffeescript (which is then compiled into javascript), you can toggle original code and compiled code with the small "eye" icon at the top, in codepen.

I have also modified the data object, made the structure simpler and easier to manipulate.

$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()

Upvotes: 1

Jeremy Thille
Jeremy Thille

Reputation: 26360

I got it from your JSfiddle. Click doesn't do anything because you CREATE a button instead of selecting the existing one.

var costHTML = $("<button>Calculate Weekly Total</button>") actually creates a new jQuery object in the browser's memory. If you want to select the existing one, use :

In the HTML :

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

In the JS :

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

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

Upvotes: 0

Jeremy Thille
Jeremy Thille

Reputation: 26360

Why not just

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

?

Did I miss something?

If you want first slideDomn #results, then slideUp .recipe, do this :

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

Upvotes: 3

Related Questions